Menu
This seems to valid for display: inline; 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)
574
A block element fills the entire line, and nothing can be displayed on its left or right side. The display property also allows the author to show or hide an element. It is similar to the visibility property.
The list-style-position property specifies the position of the list-item markers (bullet points). list-style-position: outside; means that the bullet points will be outside the list item. The start of each line of a list item will be aligned vertically: Coffee - A brewed drink prepared from roasted coffee beans... Tea.
#display: list-item. The only HTML elements displayed as list-item are the (unsurprisingly) list items <li> but also the definition descriptions <dd> . A list item is rendered with a bullet point (if in an unordered list <ul> ) or with a incremental number (if within an ordered list <ol> ).
The <li> tag defines a list item. The <li> tag is used inside ordered lists(<ol>), unordered lists (<ul>), and in menu lists (<menu>). In <ul> and <menu>, the list items will usually be displayed with bullet points. In <ol>, the list items will usually be displayed with numbers or letters.
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.
138
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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
