Question

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

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

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

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

我做了一个小提琴作为一个起点，它有两个例子：第一个是内联块模式中的列表项，第二个证明它们在宽度上对齐。

既没有实现我想要的东西，也就是整个宽度被元素占据而没有它们分成另一条线。

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

编辑：稍微分开，但为什么在我的第二个例子中li下方有一个空格，请说明我将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-仅
与内联块
没有明确需要浮动元素
保持与li内容无关的均匀分布宽度
简明css

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

Answer 2

现在是2016年，我希望使用 flexbox 更新此问题。有关浏览器兼容性的信息，请咨询CanIUse。

＆＃13;

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

＆＃13;

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

＆＃13;

预编辑fiddle（现已在上面的代码段中内嵌）

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来计算边界。

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

在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：带有li元素的inline-block，并使用带有ul元素的text-align：justify。如果您有兴趣，请点击here。

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

5 个答案: