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

Question

我需要帮助弄清楚如何构建基于 ul-li 的水平导航。棘手的部分是，所有 尺寸都必须以百分比表示。没有 px，没有 em。此外，所有列表项的宽度应相等并填满整个 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;
}