CSS3 To Make A Thin Ul Fitting Its Li

Assume the following HTML5 document:

testing

&l

Solution 1:

What would be the CSS3 stylesheet so that the width of <ul id='ul_id'> element would be the smallest to fit

You could change the display of the ul element to inline-block.

In doing so, it will have a "shrink-to-fit" width based on the size of the children elements.

Based on section 10.3.9 of the relevant spec for inline-block elements in normal flow:

If width is auto, the used value is the shrink-to-fit width as for floating elements.

#ul_id {
  display: inline-block;
  background-color: #f00;
}

<ul id='ul_id'>
  <li id='li1_id'>one</li>
  <li id='li2_id'>somelongertwo</li>
</ul>

Alternatively, setting the display to table would result in similar behavior.

Solution 2:

#ul_id {
   display: inline-block;
}

or

#ul_id {
   float: left;
}
#ul_id:after {
   clear: both;
}

One of these two should work as expected. Width resize to fit container is caused by display: block behaviour which is default for ul element.