Question

我需要帮助弄清楚如何构建基于水平ul-li的导航。其中棘手的部分是，所有大小必须以百分比表示。没有px，没有他们。此外，所有列表项应该是相等的宽度并填充整个ul。至少在我的尝试中，这个问题的另一个问题是，有7个列表项，这给了我一个丑陋的14.28 ...％的每一个 - 在我的尝试到目前为止导致主要内容区域在1-左右2px关闭，具体取决于浏览器窗口大小。

这是我正在进行的布局草图： link to the image (since I don't have enough reputation yet)

我现在的位置：

<ul id="#main_menu">
    <li class="main_menu_li"><a href="#">One</a></li><li class="main_menu_li"><a href="#">Two</a></li><li class="main_menu_li"><a href="#">Three</a></li><li class="main_menu_li"><a href="#">Four</a></li><li class="main_menu_li"><a href="#">Five</a></li><li class="main_menu_li"><a href="#">Six</a></li><li class="main_menu_li"><a href="#">Seven</a></li>
</ul>

#main_menu{
width: 100%;
list-style: none;
margin: auto 0;
padding: 0;
text-align: left;
overflow: auto;
}

.main_menu_li{
display: inline;
text-align: center;
margin: 0;
padding: 0;
width: 14.28%;
}

.main_menu_li>a{
text-decoration: none;
border: 1px solid #fff;
width: auto;
display: inline-block;
}

这段代码的问题是，在ul。

中仍然存在右侧空间

我希望你能帮助我！提前感谢您的努力！

Answer 1

尝试使用display: table：

#main_menu{
    display: table;
}

.main_menu_li{
    display: table-cell;
    width: 14.28%;
}

.main_menu_li>a{
    display: block;
}

Answer 2

好的，所以这是另一种选择。这个更不兼容，但只是为了向您展示，因为您对使用display: table感到不舒服：

#main_menu
{
    width: 100%;
    display: flex;
    flex-direction: row;
    table-layout: auto;
}

#main_menu > li
{
    flex: 1 1 auto;
    width: 14.28%;
}

#main_menu > li > a
{
    display: block;
}

这是fiddle（在Chrome中测试过）。

Answer 3

有一点 CSS3魔力，这很有可能。

这是fiddle。重要的CSS：

nav > ul > li {
    float: left;
    width: 12.28%; /* for older browsers that don't support calc */
    width: -webkit-calc(100% / 7);
    width: -moz-calc(100% / 7);
    width: calc(100% / 7);
    background: white;
    color: #333;
}

正如您所看到的，我添加了一个jQuery回退。不幸的是，JSFiddle似乎不能在IE10的IE8模式下工作，所以我无法测试它是否有效。但是，它应该！

您可以看到here以下浏览器支持calc()：

FF4.0及更高版本（-moz-前缀）
IE9.0及更高版本
Chrome 19.0及更高版本（-webkit-前缀）
Opera在其最现代化的浏览器（12.1）中支持不支持calc
有关详细信息，请参阅链接

基于百分比宽度的水平导航

3 个答案: