Elementos de listas LI na mesma linha

Pergunta
Quero fazer uma coisa especial com listas.

Poderia conseguir que os deslocamentos entre os elementos das listas sejam dentro da mesma linha, ou seja, que não se faça a quebra de linha entre elementos LI?

Valorize esta FAQ:
A FAQ Elementos de listas LI na mesma linha tem Pertence à categoria:
Resposta
Simplesmente há que definir o estilo float:left; no elemento da lista, assim:

<li style="float:left;">Elemento</li>



Embora logo, para que a lista fique bem possivelmente você necessitará definir outros atributos CSS.



<ul>

<li style="float:left; width:120px; padding-left: 10px;">Elemento 1</li>

<li style="float:left; width:120px; padding-left: 10px;">Elemento 2</li>

<li style="float:left; width:120px; padding-left: 10px;">Outra coisa</li>

<li style="float:left; width:120px; padding-left: 10px;">Esta lista li é de vários elementos por linha</li>

<li style="float:left; width:120px; padding-left: 10px;">Mais</li>

<li style="float:left; width:120px; padding-left: 10px;">Seja o que for</li>

</ul>


Temos vários artigos com exemplos de atributos CSS que se podem aplicar à listas para gerar diversos tipos de listas úteis. Explore nosso Worshop de CSS para encontra-los.

Por Miguel Angel Alvarez

Voltar à árvore de categorias Voltar à árvore de categorias

Comentários da faq
Foi enviado 1 comentário à faq
1 comentário não revisado
0 comentários revisados
 
FAQs relacionadas
  + Links que mudam ao passar o mouse
  + Diferenças de colocar estilos CSS em diferentes lugares
  + Mudar tipografia para toda a página
  + Mudar o tamanho de letra de um menu select
  + Estilo nos campos de formulário
  + Estilos em barras de deslocamento
  + Como eliminar as margens de cima e debaixo que tem um formulário
  + Definir as margens de um cabeçalho ou título <h1>
  + Alinhamento de texto à direita
  + Mudar o estilo da primeira letra de um parágrafo
  + [...]

Ver todas las FAQS de CSS

Usuários :    login / registro

Home | Sobre nós | Copyright | Anuncie | Entrar em contato