我在页面上有一个类别列表,每个类别都有一个嵌套的子类别列表。类别列表项样式以网格图案(通过display:inline; float:left
)排列项目,子类别在正常列表布局中显示在下面。类别和子类别是用户配置的,但我不认为有数百个(可能不超过10或20个子类别,分别为3或4个类别)。
我宁愿不为每个列表项设置固定大小。我想在每个元素周围绘制一个边框,但我不喜欢每个列表项大小基于它的内容时的外观。如果没有在列表项上设置固定大小,有没有办法解决这个问题?
答案 0 :(得分:5)
将ul
设置为float: left
似乎有所帮助。
答案 1 :(得分:2)
实际上,这是可能的。
<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”将是。
答案 2 :(得分:1)
你不能用css,你必须使用javascript。
答案 3 :(得分:1)
显示:内联和浮动:左边不是一个很好的组合。事实上,浮动元素上的设置显示是多余的,因为它们一旦浮动就会自动变为块级别。 (除了带有双边距的奇怪的ie6 bug,没有理由在浮动元素上设置显示)
答案 4 :(得分:1)
如果您知道平均类别项目的文字大小,则可以使用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>
答案 5 :(得分:0)
我知道在列中有几个单元格具有相同宽度的唯一方法是使用表格。 IE表达式也可能有效,但我不推荐它。
答案 6 :(得分:0)
如果您可以更改标记,请执行以下操作:
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>