30

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)

6 Answers 6

53

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.

13

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>
3
  • where did you find that character...in fact how does anyone find any character. unicode..does that has to do something with it. Sep 11, 2014 at 3:12
  • 1
    In Windows you can use the Character Map program, and on Mac you can use the Font Book. But most of the time I just google what I want!
    – alex
    Sep 11, 2014 at 9:33
  • i mean character map is like my bookmarks, everything is there but because there is so much i just use search engine to SEARCH....i can't browser all unicodes...or even remember there are things. Though after going through them yesterday i think a whole ui can be made just out of unicodes. Sep 11, 2014 at 21:05
3

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;
}
1
  • 1
    What will you do, if you need to put 3 items at <li>, not only one <a>?
    – Nikita
    Nov 30, 2017 at 8:43
1

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>

0

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

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>  

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.