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

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

0

no bootstrap use a .list-inlineclasse css

<ul class="list-inline">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>

Ref: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_txt_list-inline&stacked=h

— Matee Gojra
fonte