5

Eu tenho uma lista não ordenada <ul><li> que desejo que fique na horizontal, não na vertical, porém quando eu coloquei para ficar em linha com display: inline-block as minhas "bolinhas" indicativas sumiram!

Repare que a única coisa que mudei foi para ficar o texto na horizontal, aí a decoração da lista desapareceu, quando a lista fica na vertical a formatação fica correta. Por que isso acontece? Tem como resolver isso com CSS?

.linha li {
    display: inline-block;
}
<ul class="linha">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
    <li>item 7</li>
    <li>item 8</li>
    <li>item 9</li>
    <li>item 10</li>
    <li>item 11</li>
    <li>item 12</li>
</ul>

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
    <li>item 7</li>
    <li>item 8</li>
    <li>item 9</li>
    <li>item 10</li>
    <li>item 11</li>
    <li>item 12</li>
</ul>

4
  • @hugocsi conseguiu resolver seu problema? minha solução ajudo você?
    – Renan
    7/11/2018 às 18:08
  • @RenanOsorio sim sua resposta me atendeu em partes, mas o que realmente acontece é como o Vitor falou a LI por padrão é display: list-item que já vem com as bolinhas, quando eu mudei para inline-block ela perdeu as bolinhas. Esse era o problema de fato, recriar as bolinhas não era na verdade o problema entende, mas sim saber porque elas sumiram rss
    – hugocsl
    7/11/2018 às 18:23
  • 1
    @hugocsi ahh simm, entendi agora. Eu tinha entendido diferente a pergunta, mas tudo bem. vlw.
    – Renan
    7/11/2018 às 18:26
  • 1
    @RenanOsorio de boa meu jovem! Mas deixa a resposta, pois ela pode servir para outras pessoas em situações diferentes!
    – hugocsl
    7/11/2018 às 18:28

2 Respostas 2

3

Os bullets <li> sumiram porque eles são um comportamento restrito apenas ao display: list-item, padrão dos componentes <li>.

Quando você define o inline-block no CSS acaba sobrescrevendo esse comportamento nativo perdendo os bullets.

Uma alternativa é criar bullets com ::before, como no exemplo abaixo:

.linha li {
    display: inline-block;
	position: relative;
	padding-left: 10px;
}

.linha li::before {
	content: '';
	width: 5px;
	height: 5px;
	display: block;
	position: absolute;
	left: 0;
	top: 5px;
	border-radius: 50%;
	background: black;
}
<ul class="linha">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
    <li>item 7</li>
    <li>item 8</li>
    <li>item 9</li>
    <li>item 10</li>
    <li>item 11</li>
    <li>item 12</li>
</ul>

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
    <li>item 7</li>
    <li>item 8</li>
    <li>item 9</li>
    <li>item 10</li>
    <li>item 11</li>
    <li>item 12</li>
</ul>

0

A maneira mais fácil

.linha li {
  list-style: none;
  float: left;
}
<ul class="linha">
    <li>&bull; item 1</li>
    <li>&bull; item 2</li>
    <li>&bull; item 3</li>
    <li>&bull; item 4</li>
    <li>&bull; item 5</li>
    <li>&bull; item 6</li>
    <li>&bull; item 7</li>
    <li>&bull; item 8</li>
    <li>&bull;item 9</li>
    <li>&bull; item 10</li>
    <li>&bull; item 11</li>
    <li>&bull; item 12</li>
</ul>

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
    <li>item 7</li>
    <li>item 8</li>
    <li>item 9</li>
    <li>item 10</li>
    <li>item 11</li>
    <li>item 12</li>
</ul>

o problema de usar :before é que aprincipio não funciona no IE7.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .