Como estilizar a lista UL em uma única linha

126

Eu quero renderizar esta lista em uma única linha.

  • Item da lista1
  • Item da lista2

Deve ser mostrado como

* Item2 da lista * Item2 da lista

Qual estilo CSS usar?

css RD
fonte
Eu sei que esta questão não é específico para inicialização mas eu achei de bootstrap miniaturas para ser muito útil para a lista horizontal de texto, imagens, vídeo, etc
Anupam

Respostas:

184 
ul li{
  display: inline;
}

Para mais informações, consulte as opções básicas da lista e uma lista horizontal básica em listamatic. (graças a Daniel Straight abaixo pelos links).

Além disso, como apontado nos comentários, você provavelmente deseja estilizar o ul e quaisquer elementos que estejam dentro dos li e dos li para obter uma aparência agradável.

rz.
fonte
7
Enquanto isso começa o trabalho feito, você também vai querer incluir algum estofo para manter os elementos apresenta bem
Rob Allen
1
correto, isso apenas torna a lista horizontal. você provavelmente deseja adicionar um pouco mais de estilo ao ul, li e ao que quer que esteja no li para tornar as coisas boas.
rz.
1
Como conseguir as balas para ficar? Ou podemos marcar de outra maneira.
RD
1
como o @DotDot aponta: usar {display: inline} remove o estilo do marcador. Contornar isso é: 1. use {float: left} (em vez disso, não trabalhando no IE9). 2. adicione um preenchimento à esquerda e adicione uma imagem de fundo (que é o marcador como imagem de fundo).
Adrien Seja
26

Nos navegadores modernos, você pode fazer o seguinte (compatível com CSS3)

ul
{
  display:flex;  
  list-style:none;
}
<ul>
  <li><a href="">Item1</a></li>
  <li><a href="">Item2</a></li>
  <li><a href="">Item3</a></li>
</ul>
Expandir snippet

davidlbaileysr
fonte
15

Código HTML:

<ul class="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Código CSS:

ul.list li{
  width: auto;
  float: left;
}
adel aaji
fonte
9

Tente experimentar algo assim também:

HTML

 <ul class="inlineList">
   <li>She</li>
   <li>Needs</li>
   <li>More Padding, Captain!</li>
 </ul>

CSS

 .inlineList {
   display: flex;
   flex-direction: row;
   /* Below sets up your display method: flex-start|flex-end|space-between|space-around */
   justify-content: flex-start; 
   /* Below removes bullets and cleans white-space */
   list-style: none;
   padding: 0;
   /* Bonus: forces no word-wrap */
   white-space: nowrap;
 }
 /* Here, I got you started.
 li {
   padding-top: 50px;
   padding-bottom: 50px;
   padding-left: 50px;
   padding-right: 50px;
 }
 */

Fiz um codepen para ilustrar: http://codepen.io/agm1984/pen/mOxaEM

agm1984
fonte