Question

对于我网站的主导航，有一个980像素宽的div，主要导航链接为ul。我试图使导航链接拉伸以均匀地适合div的宽度。

<div style="width: 980px;">
<ul id="horizontal-style">
  <li><a href="#">Nav Item</a></li>
  <li><a href="#">Short Item</a></li>
  <li><a href="#">Really Long Nav Item</a></li>
  <li><a href="#">Nav Link</a></li>
  <li><a href="#">Another Link</a></li>
</ul>
</div>

我正在做一些典型的css来横向创建ul列表（float：left，display：block）。我可以调整li的填充以使其非常接近，但我真正需要的是一种使其拉伸以适应自动的方法。可能的？

修改难度1：不能使用表格。难度2：每个导航项目的宽度不同，以适应更长和更短的链接名称。

Answer 1

这是最简单的方法：http://jsfiddle.net/thirtydot/jwJBd/

（或table-layout: fixed均匀宽度分布：http://jsfiddle.net/thirtydot/jwJBd/59/）

IE7中的won't work。

#horizontal-style {
    display: table;
    width: 100%;
    /*table-layout: fixed;*/
}
#horizontal-style li {
    display: table-cell;
}
#horizontal-style a {
    display: block;
    border: 1px solid red;
    text-align: center;
    margin: 0 5px;
    background: #999;
}

_{编辑前的旧答案：http://jsfiddle.net/thirtydot/DsqWr/}

Answer 2

人们讨厌表格中的非表格数据，但你所要求的正是表格所擅长的。 <table width="100%">

Answer 3

不优雅（但有效）的方式：使用百分比

#horizontal-style {
    width: 100%;
}

li {
    width: 20%;
}

这仅适用于5 <li>示例。或多或少，相应地修改您的百分比。如果您的页面上有其他<li>，则可以随时为这些特定的“menu-li”分配这些内容，以便只有它们受到影响。

Answer 4

#horizontal-style {
    width: 100%;
}

li {
    width: 20%;
}

这种方法不会响应，因为在最小的屏幕上它将是20％，这将是太小或另一种覆盖方式将是在不同断点处的媒体查询。

Answer 5

我希望这对您有所帮助...因为我尝试了所有答案，但没有一个能完美地工作。所以，我不得不自己想办法。

#horizontal-style {
  padding-inline-start: 0 !important; // Just in case if you find that there is an extra padding at the start of the line 
  justify-content: space-around;
  display: flex;
}

#horizontal-style a {
    text-align: center;
    color: white;
    text-decoration: none;
}

拉伸水平ul以适合div的宽度

5 个答案: