如何在不设置固定大小的情况下强制ul中的所有li元素与最大项目相同?

时间:2009-03-03 03:09:27

标签: html css

我在页面上有一个类别列表,每个类别都有一个嵌套的子类别列表。类别列表项样式以网格图案(通过display:inline; float:left)排列项目,子类别在正常列表布局中显示在下面。类别和子类别是用户配置的,但我不认为有数百个(可能不超过10或20个子类别,分别为3或4个类别)。

我宁愿不为每个列表项设置固定大小。我想在每个元素周围绘制一个边框,但我不喜欢每个列表项大小基于它的内容时的外观。如果没有在列表项上设置固定大小,有没有办法解决这个问题?

7 个答案:

答案 0 :(得分:5)

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

示例:http://jsbin.com/uluke

答案 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>