The UL LI losing formatting after I put it on line... Why did the "balls" of my LI disappear?

Asked

Viewed 259 times

5

I have an unordered list <ul><li> I wish it to stay horizontal, not vertical, but when I put it to stay in line with display: inline-block my indicative "balls" are gone!

Note that the only thing I changed was to stay the text horizontal, then the list decoration disappeared, when the list is vertical the formatting is correct. Why does this happen? There are ways to solve this with 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>

html css html5 css3

  • @hugocsi managed to solve your problem? my solution help you?

  • @Renanosorio yes his answer met me in parts, but what really happens is how Vitor spoke to LI by default is display: list-item that already comes with the balls, when I changed to inline-block she lost the balls. That was the problem indeed, recreating the balls was not really the problem understand, but rather knowing why they disappeared rss

  • 1

    @hugocsi Ahh Sam, I understand now. I had understood the question differently, but that’s okay. vlw.

  • 1

    @Good Renanosorio my young! But let the answer because it can serve other people in different situations!

2 answers

3


The Bullets <li> disappeared because they are a behavior restricted only to the display: list-item, component standard <li>.

When you set inline-block in CSS you end up overwriting this native behavior by losing the Bullets.

An alternative is to create Bullets with ::before, as in the example below:

.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

The easy way 

.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>

the problem with using :before is that aprincipio does not work on IE7.

Browser other questions tagged html css html5 css3

You are not signed in. Login or sign up in order to post.