CSS3使一个薄的适合其li [英] CSS3 to make a thin ul fitting its li
问题描述
假设使用以下HTML5文档：
<！doctype html&
< html>
< head>< title> try< / title>
< / head>
< body>
< h1>测试< / h1>
< ul id ='ul_id'>
< li id ='li1_id'>一个< / li>
< li id ='li2_id'> somelongertwo< / li>
< / ul>
< / body>< / html>
什么是CSS3样式表，以便< $ c>< ul id ='ul_id'> 元素将是最小的适合，因此将在这里的宽度< li id ='li2_id'> ; 加上其项目符号，因为第二个列表项是< ul id ='ul_id'> 元素中最宽的项？ p>
我不希望我的< ul id ='ul_id'> 的宽度包含< body>
这个问题的上下文和动机是我的优化（几乎最小化）jqueryui菜单的宽度问题。
您可以更改 c $ c> 元素 inline-block 。
在这样做时，它会有缩小到适合宽度。
基于部分10.3.9 相关规范 inline-block 元素正常流程：
如果
width是/ code>，则使用的值是缩减to-fit width as floating element。
#ul_id {display：inline-块; background-color：＃f00;}
< ul id ='ul_id'> < li id ='li1_id'>一个< / li> < li id ='li2_id'> somelongertwo< / li>< / ul>
或者，将显示设置为表会导致类似的行为。
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 would be the CSS3 stylesheet so that the width of <ul id='ul_id'> element would be the smallest to fit, so would be here the width of <li id='li2_id'> plus its bullet, since the second list item is the widest item of the <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 of this question is my optimizing (nearly minimizing) width of jqueryui menu question.
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
widthisauto, 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.
这篇关于CSS3使一个薄的适合其li的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
