css 使内联块元素跨越容器的整个宽度

Question

好的，这实际上有点复杂。

我有一个导航列表，其中列表项设置为inline-block。 列表的项目数是动态的，因此可能会有所不同。

我的目标是让列表项跨越容器的整个宽度。 （例如，如果有 4 个列表项，每个项将占用容器宽度的 25% [忽略边距/填充等]）

浏览器似乎会在它们之间有空格（换行符/空格等）的内联块元素中添加 4px 边距，这增加了复杂性。

我以小提琴作为起点，其中有 2 个示例：第一个只是内联块模式下的列表项，第二个证明它们跨越宽度。

两者都没有达到我想要的，即整个宽度都被元素占据而不会中断到另一行。

http://jsfiddle.net/4K4cU/2/

编辑：稍微分开，但为什么在我的第二个示例中，lis 下方有一个空格，尽管我已将 line-height 和 font-size 设置为 0？

Answer 1

好的，尽管有很多不错的答案，而且我最初认为 js/jquery 是唯一可行的方法，但实际上有一个很好的纯 CSS 解决方案：使用 表格单元格。 @Pumbaa80 的原创建议

.list {
    margin:0;
    padding: 0;
    list-style-type: none;
    display: table;
    table-layout: fixed;
    width:100%;
}
.list>li {
    display: table-cell;
    border:1px green solid;
    padding:5px;
    text-align: center;
}
.container {
    border: 1px #777 solid;
}

<div class="container">
    <ul class="list">
        <li>text</li>
        <li>text</li>
        <li>some longer text</li>
        <li>text</li>
    </ul>
</div>

这优于其他解决方案：

• 仅 CSS
• 没有与 inline-block 一样的 4px 边距问题
• 浮动元素不需要 clearfix
• 保持独立于li 内容的平均分布宽度
• 简洁的CSS

在这里提琴：http://jsfiddle.net/rQhfC/

Answer 2

现在是 2016 年，我想用 flexbox 的答案更新这个问题。请咨询CanIUse 了解浏览器兼容性。

/* Important styles */
ul {
  display: flex;
}
li {
  flex: 1 1 100%;
  text-align: center;
}

/* Optional demo styles */
* {
  margin: 0;
  padding: 0;
}
ul {
  margin-top: 2em;
  justify-content: space-around;
  list-style: none;
  font-family: Verdana, sans-serif;
}
li {
  padding: 1em 0;
  align-items: center;
  background-color: cornflowerblue;
  color: #fff;
}
li:nth-child(even) {
  background-color: #9980FA;
}

<ul>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>

预编辑 fiddle（现在内联在上面的 sn-p）

Answer 3

这是修改原始概念的一种方法。

CSS 是：

.list {
    padding:0;
    margin:0;
    list-style-type:0;
    overflow: hidden;
    height: 42px;
}
.list li {
    display: inline-block;
    line-height: 40px;
    padding: 0 5px;
    border:1px green solid;
    margin:0;
    text-align:center;
}

在您的父容器.list 上，设置一个高度以包围子元素。 在这种情况下，我选择了 40px 并添加了 2px 来考虑边框。

另外，在.list 上设置overflow: hidden 以隐藏伪元素生成的第二行。

在li 元素上，设置line-height: 40px，它将使文本垂直居中。

由于高度是固定的，第二行被隐藏，您可以使用边框等设置父级样式，而无需额外的空白区域破坏设计。

演示：http://jsfiddle.net/audetwebdesign/WaRZT/

并非万无一失...

在某些情况下，您的链接可能多于一行。在这种情况下，这些项目可能会强制形成第二行，并且由于溢出隐藏，您将看不到它们。

等间距的边框

如果你想让边框均匀分布，你需要给li元素设置一个宽度。

如果内容来自 CMS，并且您对编码有一定的控制权，则可以使用预定义的 CSS 规则动态生成类名来设置正确的宽度，例如：

.row-of-4 .list li { width: 24%; }
.row-of-5 .list li { width: 19%; }
.row-of-6 .list li { width: 16%; }

见：http://jsfiddle.net/audetwebdesign/WaRZT/3/

Answer 4

对此有多个修复。我更喜欢简单地删除元素之间的空白，因为字体大小技巧涉及非语义 CSS。而且它更容易哈哈。代码，因为答案需要它：

<ul class="list">
    <li>
        text
    </li><li>
        text
    </li><li>
        text
    </li><li>
        text
    </li>
</ul>

Updated jsFiddle，其中第一个列表的项目设置为width:25%;，并适合窗口的一行。如果这不是你想要的，那我一定是误会了。

编辑：未知数量的列表项

这有一些 CSS3 的东西，但要跨浏览器兼容回 IE8，你需要一个 JS 解决方案。这样的事情应该可以工作：

var listItems =  document.querySelectorAll('li');
listItems.style.width = listItems.parentNode.style.width / listItems.length;

第二次编辑：用于 jQuery 而不是 JS

希望它，但是：

var $listitems = $('.list').children();
$listitems.width($listitems.parent().width()/$listitems.length);

Answer 5

您可以将 display:inline-block 与 li 元素一起使用，并将 text-align:justify 与 ul 元素一起使用。如果您有兴趣，请点击here。