Lista UL com colunas

4 de março de 2018 3 respostas

tantam 4 de março de 2018

Boa tarde, criei uma lista com três colunas, mas estou tendo problema com o primeiro registro, pos ele sempre fica um pouco desalinhado dos outros, já verifiquei no meu html para ver se tinha alguma tag provocando isto, mas não achei nada, a lista fica assim:

o meu css, esta sssim:

.pedidos-lista li{
width: 27.3%;
height: 15%;
margin: 0.5%;
border: 1px solid;
float: left;
background-color: green;
overflow: hidden;

}

.pedidos-lista ul li:NTH-CHILD(odd) {

float: left;

}

Alguém tem alguma dica de como eu posso ajustar isso?

3 Respostas

anon30449818 5 de mar. de 2018

Posta o HTML e o resto do CSS, pra eu emular?

tantam 6 de mar. de 2018

Opa, claro que sim

HTML:

<ul th:each="venda : ${vendas}" class="pedidos-lista">
                <li><a class="btn btn-success"
                    th:href="@{/venda/{codigo}(codigo=${venda.codigo})}"> <span
                        th:text="${venda.situacao}" class="span-dados-venda"></span><br />
                        <span th:text="|Pedido: ${venda.codigo}|" class="span-dados-venda"></span><br />
                        <span th:text="|R$ ${{venda.valor_produtos}}|"
                        class="span-dados-venda"></span><br /> <span
                        th:text="${venda.pessoa.nome}" class="span-dados-venda"></span>
                </a></li>
            </ul>

CSS:

.span-dados-venda {
    font-size: 1.4em;
}

.pedidos-lista li{
    width: 27.3%;
    height: 15%;
    margin: 0.5%;
    border: 1px solid;
    float: left;
    background-color: green;
    overflow: hidden;
}


.pedidos-lista ul li:NTH-CHILD(odd) {
    float: left;
}

Esses são os códigos que estou usando, agradeço desde já.

anon30449818 6 de mar. de 2018

Com os códigos, não conseguir simular o erro.

Criado 4 de março de 2018

Ultima resposta 6 de mar. de 2018

Respostas 3

Participantes 2

3 Respostas

Topicos relacionados