All geek questions in one place

CSS3 to make thin street matching its li

Assume the following HTML5 document:

<!doctype html> <html> <head><title>try</title> </head> <body> <h1>testing</h1> <ul id='ul_id'> <li id='li1_id'>one</li> <li id='li2_id'>somelongertwo</li> </ul> </body></html>

what will the CSS3 stylesheet be so that the width of the <ul id='ul_id'> element is the smallest to fit, so here will be the width <li id='li2_id'> plus its marker, since the second list element is the widest element <ul id='ul_id'> element?

I don’t want the width of my <ul id='ul_id'> to be as wide as the containing <body>

The context and motivation for this question is my optimization (almost minimization) of the width of the jqueryui menu .

+1
source share
2 answers

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

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

In doing so, it will have a “shrink-to-fit” width depending on the size of the children.

Based on section 10.3.9 of the relevant specification for inline-block elements in a normal stream:

If width is auto , the value used is 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 display to table will result in a similar behavior.

+2
source 
 #ul_id { display: inline-block; }

or

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

One of these two should work as expected. Resizing the width to fit the container is caused by the display: block behavior, which is the default for the ul element.

+1
source

Source: https://habr.com/ru/post/1240726/

More articles:


All Articles