9

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

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

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

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

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

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

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

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

4

5 回答 5

11

好的，尽管有很多不错的答案，而且我最初认为 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/

于 2013-06-13T09:58:06.240 回答
10

现在是 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>

预编辑小提琴（现在内联在上面的片段中）

于 2016-09-15T13:02:16.873 回答
2

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

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/

于 2013-06-12T16:14:07.963 回答
1

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

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

更新了 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);
于 2013-06-12T16:05:53.130 回答
0

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

于 2013-06-12T16:22:26.423 回答