Question

假设以下HTML5文档：

<!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>

什么是CSS3样式表，以便<ul id='ul_id'>元素的 width 最小，所以<li id='li2_id'>的宽度加上它的子弹，因为第二个列表项是<ul id='ul_id'>元素的最宽项目？

我不希望<ul id='ul_id'>的宽度与包含<body>

的宽度一样宽

这个问题的背景和动机是我的optimizing (nearly minimizing) width of jqueryui menu问题。

Answer 1

什么是CSS3样式表，以便<ul id='ul_id'>元素的宽度最小以适合

您可以将display元素的ul更改为inline-block。

这样做时，它将根据子元素的大小设置"shrink-to-fit"宽度。

基于正常流程中inline-block元素的相关规范的section 10.3.9：

如果width为auto，则使用的值为浮动元素的shrink-to-fit宽度。

#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>

或者，将display设置为table会导致类似的行为。

Answer 2

#ul_id {
   display: inline-block;
}

或

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

这两个中的一个应该按预期工作。宽度调整大小以适应容器是由display: block行为引起的，这是ul元素的默认行为。

CSS3使一个瘦的ul适合它的li

2 个答案: