How to mount columns from ul?

Question

How to mount columns from ul?

Navigation

#1 by (1 votes)

2

I have this code and would like every 4 results to be inserted a <ul></ul> to make columns of 25% wide and get exactly 4 columns. How can I do it?

<ul>
    <li>
        <?php echo $i; ?>x <strong>R$ <?php echo number_format($preco_parcela, 2, ',', '.');?></strong>
        <?php echo $texto_juros?><?php echo " = R$ " . number_format( $i * $preco_parcela, 2, ',', '.'); ?>
    </li>
</ul>

php html

asked by anonymous 28.01.2015 / 15:59

1 answer

How to create a List and SubList? How to add a Label inside a TextBlock by code behind

score 1 · Answer 1

The best solution would be to use DIVS.

Regardless of the number of results, the layout would suit by putting the results side by side and you would still have to apply a responsive manually or boostrap classes (.span3 for ex).

Example:

<div class="content">
    <div class="item">
    Div com 25% largura e regras para responsivo.
    </div>
    <div class="item">
    Div com 25% largura e regras para responsivo.
    </div>
    <div class="item">
    Div com 25% largura e regras para responsivo.
    </div>
    <div class="item">
    Div com 25% largura e regras para responsivo.
    </div>
    <div class="item">
    Div com 25% largura e regras para responsivo.
    </div>
    <div class="item">
    Div com 25% largura e regras para responsivo.
    </div>
</div>
<!-- end content -->

CSS:

.content { width: 100%; max-width: 1170px; / * size that you use on the site. * / overflow: hidden; }

.content. item { width: 23%; margin: 10px 1%; }

@media screen and (max-width: 768px) { .content. item { width: 48%; margin: 10px 1%; } }

@media screen and (max-width: 480px) { .content. item { width: 100%; margin: 10px auto; }

}