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:

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

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

Give this a try:

ul {
  border: solid 1px black;
  display: inline-block;
li {
  border: solid 1px red;
  float: left;
  clear: left;
Answered about 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 about 7 years ago
  • Perhaps your list is overflowing? Try swapping your list-style-position - This solution works with the numbers on neatlysliced about 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 about 7 years ago

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 about 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 about 7 years ago

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 about 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 about 7 years ago
  • You could also float the <li> to make them shrink-wrap? Jens Hedqvist about 7 years ago