This question is similar to this one I asked about setting the width of a list to the width of its contents.

If I have the following:

<ol>
  <li>Short line</li>
  <li>this is a longer line</li>
</ol>

I want the list item width's to be the size of their contents such that the 2nd one will be wider than the first one. I tried setting the display to inline-block like I did with the <ol> element to get that working, but it gets rid of all the number bullets.

I have the width visible again by using:

li {
  border: solid 1px black;
}

and I'm using

ol {
  display: inline-block;
}

as recommended by the user that answered my first question.

Is there any way to do this?

Update: changed it from <ul> to <ol>.

3 answers

o.k.w 2355
1
point

Give this a try:

ul {
  border: solid 1px black;
  display: inline-block;
}
li {
  border: solid 1px red;
  float: left;
  clear: left;
}
Answered almost 7 years ago by o.k.w
  • This solves the issue of line items appearing on their own lines, however, it still doesn't show the numbers of the numbered list. senseful almost 7 years ago
  • Perhaps your list is overflowing? Try swapping your list-style-position - This solution works with the numbers on http://w3schools.com/css/tryit.asp?filename=trycss_list-style-type_ex neatlysliced almost 7 years ago
  • I tried it with the URL you pasted. I added "li {border: solid; float: left; clear: left;}" to the end of the styles. It gets rid of all bullets in Safari, Chrome, and IE. The only browser that retains it is Firefox. It looks like this is not a cross browser solution, thanks though. senseful almost 7 years ago
0
points

This is the default rendering mode for a <li>, which is an inline element. It maybe that your ul style is causing this to be over-ridden. Try adding display: inline; to your li style.

Answered almost 7 years ago by Alastair Smith
  • I tried it both in Safari (Mac OS X) and Chrome (Windows XP). I disabled the OL's style, and tried with and without "display: inline" for the LI. In all cases, the LI items always expand to 100% of their container's width. senseful almost 7 years ago
0
points

You could also try to float the <ol> to either the left or to the right to utilize the wonderful shrink-wrapping (the element box shrinks to span only it's content/children). Be aware of this bug though.

Answered almost 7 years ago by Jens Hedqvist
  • This solves my first question trying to get the OL to shrink to its contents, however it doesn't solve this one about getting an LI to shrink to its contents. Thanks for providing another solution to my first problem though. senseful almost 7 years ago
  • You could also float the <li> to make them shrink-wrap? Jens Hedqvist almost 7 years ago