Say I have an unordered list, I want the width of the element to be the size of all the contents.

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

Now if I add a border to the ul element:

ul {
  border: solid 1px black;

it expands all the way to the right, since the ul's width is 100%. Is there any way to make it shrink the width to the smallest size possible (e.g. in this case, it would be the width of the 2nd <li> element). This way when I add a border to the <ul> element, it won't expand all the way to the right of the page.

This would be similar to a <span> element where it sizes itself to the width of its contents.

1 answer

o.k.w 2355
This was chosen as the best answer

You can try setting the default display mode from block to inline-block.


ul {
  border: solid 1px black;
  display: inline-block;

Note that you will lose tthe "block" behavior, and more importantly this probably will not work in IE5/6/7.

Answered about 7 years ago by o.k.w