0

我需要帮助弄清楚如何构建基于 ul-li 的水平导航。棘手的部分是，所有尺寸都必须以百分比表示。没有像素，没有时间。此外，所有列表项的宽度应相等并填充整个 ul。另一个问题是，至少在我的尝试中，有 7 个列表项，每个项都给我一个丑陋的 14.28...% - 在我迄今为止的尝试中，导致主要内容区域约为 1- 2px 关闭，取决于浏览器窗口大小。

这是我正在处理的布局草图： 链接到图像（因为我还没有足够的声誉）

我现在在哪里：

<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 的右侧仍有空间。

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

4

3 回答 3

2

尝试使用display: table：

#main_menu{
    display: table;
}

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

.main_menu_li>a{
    display: block;
}
于 2013-03-23T16:34:57.290 回答
1

好的，所以这是另一种选择。这个更不兼容，但只是为了向您展示并且因为您对使用感到不舒服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;
}

这是一个小提琴（在 Chrome 中测试）。

于 2013-03-23T17:17:43.490 回答
0

借助一点CSS3 魔法，这很有可能。

这是小提琴。重要的 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 模式下不起作用，所以我无法测试它是否有效。但是，应该！

正如您在此处看到的，以下浏览器支持calc()：

  • FF4.0 及更高版本（-moz-前缀）
  • IE9.0 及更高版本
  • Chrome 19.0 及更高版本（-webkit-前缀）
  • Opera 不支持其calc最现代的浏览器 (12.1)
  • 请参阅链接以获取更多信息
于 2013-03-23T17:10:59.533 回答