Why does the list style disappear when display: block is added to a list item in a list (<ul> or <ol>)?
This seems to valid for display: inline开发者_StackOverflow中文版;
and display: inline-block;
too.
This is what I mean:
ul li {
display: block;
/* Or display: inline; */
/* Or display: inline-block; */
}
<ul>
<li>list item1</li>
<li>list item3</li>
<li>list item3</li>
</ul>
And with list style I mean the actual "bullets" or "numbers" (when <ol>
is used)
That's because normally, display
is set to list-item
for <li>
elements. See the W3C CSS3 specification: http://www.w3.org/TR/css3-lists/#declaring-a-list-item.
To declare a list item, the ‘display’ property should be set to ‘list-item’.
Note that you can give arbitrary HTML elements the same behaviour; set display: list-item
on a <div>
for example.
An updated solution is to make use of :before
and content
.
See this JSfiddle for a working example. http://jsfiddle.net/t72h3/
ul li {
display: inline-block;
}
ul li:before {
content: "• ";
}
<ul>
<li>list item1</li>
<li>list item3</li>
<li>list item3</li>
</ul>
A way to get the effect would be:
<ol>
<li>
<a href="mylink">desc</a>
</li>
</ol>
CSS:
li {
list-style-position: inside;
display: inline-block; /* or block */
}
li a {
display: list-item;
padding: 10px 20px;
}
Martin's answer is true but doesn't provide a solution and Pappy's is only relevant if you want bullets or easily have access to the what the li
's identifier will be. In my case, I need to have an ol
with upper-alpha
so that's not possible.
The shortest way around this for us was to put a an inline (inline
, inline-block
, inline-flex
) property as well as vertical-align: top
on the immediate child of the li
:
ol {
list-style: upper-alpha;
> li {
display: block;
}
}
.list-item-content {
display: inline-block; // any inline property will work
vertical-align: top;
}
<ol>
<li>
<div class="list-item-content">Some text</div>
</li>
</ol>
Solution for ul
ul {
list-style: none;
display: block;
padding: 0;
}
ul li::before {
content: "• ";
}
<ul>
<li>list item1</li>
<li>list item3</li>
<li>list item3</li>
</ul>
Solution for ol
using counter-increment
ol {
list-style: none;
display: block;
padding: 0;
counter-reset: my-counter;
}
ol li {
counter-increment: my-counter;
}
ol li::before {
content: counter(my-counter) ". ";
}
<ol>
<li>list item1</li>
<li>list item3</li>
<li>list item3</li>
</ol>
Use the CSS property "float:left" for Li(s) to display a list horizontally. no need to assign "display:block" property. you can give margin-left or right property to set spaces between text and style shape.
li{
float:left;
margin-right:20px;
}
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
精彩评论