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

Question

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

Navigation

#1 by (3 votes)
#2 by (0 votes)

5

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

Notice that the only thing I changed was to keep the text horizontal, then the list decoration disappeared, when the list is vertical the formatting is correct. Why does it happen? Can you 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 html5 css css3

asked by anonymous 07.11.2018 / 14:25

2 answers

0

The easiest 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 of using: before is that aprincipio does not work in IE7.

07.11.2018 / 14:59

How to rename a constraint in mysql? Regular expression to clone a value in a field

score 3 · Accepted Answer

Bullets <li> have disappeared because they are behavior restricted only to display: list-item , default of <li> components.

When you set the inline-block in CSS, you override this 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>