代码之家 › 专栏 › 技术社区 › Malaise

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

css html

Malaise · 技术社区 · 17 年前

我在一个页面上有一个类别列表,每个类别都有一个嵌套的子类别列表。类别列表项样式以网格模式排列项(通过 display:inline; float:left

我宁愿不为每个列表项设置固定大小。我想在每个元素周围画一个边框,但我不喜欢每个列表项大小基于其内容时的样子。是否有一种方法可以在不设置列表项固定大小的情况下解决这个问题?

7 回复 | 直到 17 年前

nickf 17 年前

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

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

qpingu 17 年前

<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”是必需的。

garrow 17 年前

如果你知道你的文本大小平均您可以使用的类别项目 min-width 将所有项目设置为此大小,但允许它们针对超大项目进行扩展。这甚至可以在渲染时以编程方式设置。

层叠样式表

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;
}

超文本标记语言

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

Shawn 17 年前

alex 17 年前

sblundy 17 年前

据我所知,在一列中有几个单元格具有相同宽度的唯一方法是使用表。IE表达式可能也适用,但我不建议使用。

alex2k8 17 年前

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>