如何在不设置固定尺寸的情况下，将ul中的所有li元素与最大物品的尺寸相同？

Question

我有一个页面上的类别列表，每个类别都有一个嵌套的子类别列表。类别列表项目样式以网格模式排列项目（通过display:inline; float:left），子类别以正常列表布局显示在下方。类别和子类别是用户配置的，但我不指望有数百个（可能不超过10个或20个子类别的3个或4个类别）。

我宁愿不为每个列表项设置一个固定的大小。我想围绕每个元素绘制边框，但是我不喜欢每个列表项大小基于其内容时的外观。没有在列表项目上设置固定大小的解决方法吗？

Answer 1

你不能使用CSS，你必须使用JavaScript。

Answer 2

我知道在一列中有多个单元格具有相同宽度的唯一方法就是使用表格。 IE表达式也可能工作，但我不会推荐它。

Answer 3

其实，这是可能的。

<div style="float: left"> 
    <div style="display: block"> 
    <div class="cat">Category #1</div> 
    <div class="sub">Sub category #1</div> 
    <div class="sub">Sub category #2</div> 
    </div> 
    <div style="display: block"> 
    <div class="cat">Category #2</div> 
    <div class="sub">Sub category #1</div> 
    <div class="sub">Sub category #2 LONG LONG LONG</div> 
    </div> 
</div> 

只是因为方块元素填充到最大尺寸。我知道这是默认设置，只是添加它使其更加明显。 “float：left”不是必需的，但是“display：inline”会是。

Answer 4

显示：inline和float：left不是很好的组合。事实上，浮动元素上的设置显示是多余的，因为浮动元素自动变为块级别。 （除了一个奇怪的双边界ie6错误，没有理由设置显示：浮动元素）

Answer 5

设置ul有float: left似乎有帮助。

例子：http://jsbin.com/uluke

Answer 6

如果你可以改变你的标记，比：

ul { 
    float: left; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

li { 
    border: 1px solid black; 
    margin-left: 1em; 
} 

li.category { 
    border: none; 
    margin-left: 0; 
} 


<ul> 
    <li class='category'>Category #1</li> 
    <li>Sub #A</li> 
    <li>Sub #B</li> 

    <li class='category'>Category #2</li> 
    <li>Longer Sub #C</li> 
    <li>Sub #D</li> 
</ul> 

Answer 7

如果你知道你平均类项目的文本大小，你可以使用min-width设置的所有项目这个大小，但让他们成长为超大型物品。这甚至可以在渲染上以编程方式设置。

请原谅这个庞大的例子。
CSS

ul.tags { 
    display:block; 
    margin: 0; 
    padding:0; 
    width:40em; 
} 
ul.tags li { 
    display:inline-block; 
    /* 
    * or for FF2 compat use    
    display:inline-block; 
    float:left; 
    */ 
    margin:2px; 
    padding:2px; 
    min-width:8em; 
    border:1px solid #ddd; 
    text-align:center; 
} 

HTML

<ul class="tags"> 
     <li>lorem ipsum dolor </li> 
     <li>dolor sit amet</li> 
     <li>consectetur adipisicing elit</li> 
     <li>sed do </li> 
     <li>eiusmod tempor incididunt </li> 
     <li>ut labore </li> 
     <li>et dolore </li> 
     <li>magna </li> 
     <li>aliqua</li> 
     <li>ut enim </li> 
     <li>ad minim veniam</li> 
     <li>quis nostrud </li> 
     <li>exercitation ullamco laboris </li> 
     <li>nisi ut </li> 
     <li>aliquip </li> 
     <li>ex ea </li> 
     <li>commodo </li> 
     <li>consequat</li> 
     <li>duis aute irure </li> 
     <li>dolor in </li> 
     <li>reprehenderit </li> 
     <li>in voluptate </li> 
     <li>velit esse </li> 
     <li>cillum dolore </li> 
     <li>eu fugiat nulla </li> 
     <li>pariatur excepteur </li> 
     <li>sint </li> 
     <li>occaecat cupidatat </li> 
     <li>non proident</li> 
     <li>sunt in </li> 
     <li>culpa qui </li> 
     <li>officia deserunt </li> 
     <li>mollit anim id est laborum</li> 
</ul>