Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Fala galera, nas últimas horas estou tentando solucionar um problema que me parece extremamente simples porém até o momento não consigo de forma alguma o resultado que quero! Deixe-me explicar:
Tenho uma lista não ordenada:
<ul>
<li>Texto extenso que quebra linha</li>
<li>Linha 2</li>
<li>Linha 3</li>
</ul>O que eu quero:
Quero que os elementos <li> fiquem na vertical até atingir o limite da <ul>, quando não houver mais espaço eles devem aparecer do lado direito da mesma forma, um em cima do outro
Em outras palavras é algo assim:
/applications/core/interface/imageproxy/imageproxy.php?img=http://img24.imageshack.us/img24/4681/81187995.jpg&key=53dd93b53061cc248b4b7149ba04dc976e7cd400e672be4d60859bc4a5eec4b1" alt="Imagem Postada" />
Desculpem se parecer uma dúvida idiota! Aguardo retorno, abraços!
>
sabe usar CSS ?
Basta por um width e height no **<ul>**
E depois no **<li>**Fala Thelon, sei usar sim, queria eu que o problema fosse fácil assim, o problema é o seguinte:
- Ao posicionar os elementos com float:left eles ficam lado a lado e quando chegam ao final da ul continuam na parte inferior, o problema é que quando existe uma quebra de linha o <li> com o dobro da altura dos outros elementos, assim as linhas passam a se agrupar ao lado desse elemento <li> com quebra de linha.
Sinto lhe informar que não tem como fazer elas irem pra outra coluna de forma automática assim. Você teria que usar 2 UL ou, talvez, usar um javascript pra fazer ela fluturem a direita a partir de certo numero :blink: .
O Thelon deu uma viajada.
Fica bem feio, mas dá:
<ul>
<li class="esq">Teste</li>
<li class="esq">Teste</li>
<li class="esq">Teste</li>
<li class="dir">Teste</li>
<li class="dir">Teste</li>
<li class="dir">Teste</li>
</ul>ul{
width: 600px;
} margin: 10px;
list-style: none;
}
.esq{
float: left;
}
.dir{
float: right;
}http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
se o ul tem altura fixa, seria só colocar float:left no li(claro que com display block e width definidos), e usar alguma coisa para o clear, usar um after ou overflow auto, tomar cuidados com margin por causo do double float.
sabe usar CSS ?