Question

尝试使用横向导航栏，该导航栏具有跨越整个页面的等间距链接。我有6个链接，所以我认为每个链接的宽度约为16.67％，但这不起作用。

16.5％有效，直到您调整页面大小，此时导航栏中的最后一项将下拉到下一行。有没有办法可以防止这种情况，使它们始终处于中心位置并且在所有窗口尺寸中？

有没有办法可以防止用户将窗口大小调整到会导致链接重叠或不完全显示的大小？

到目前为止，这是我的代码：

#navbar {margin:0; padding:0; overflow:hidden; width:100%;}
li      {width:100%}
li a    {padding: 6px 3px; float:left; width:16.5%; text-align:center;}

<ul id='navbar'>
<li><a href='#'> 1 </a></li>
<li><a href='#'> 2 </a></li>
<li><a href='#'> 3 </a></li>
<li><a href='#'> 4 </a></li>
<li><a href='#'> 5 </a></li>
<li><a href='#'> 6 </a></li>
</ul>

Answer 1

在Safari中，它总是搞砸了，直到我删除你的左/右填充。不需要左/右填充，因为间距已经由宽度和其他CSS确定。

JSFiddle

#navbar {margin:0; padding:0; overflow:hidden; width:100%;}
li      {width:100%}
li a    {padding: 6px 0; float:left; width:16.5%; text-align:center;}

我不确定IE会对分数宽度百分比感到高兴，所以试试这个。

JSFiddle

#navbar {margin:0; padding:0; overflow:hidden; width:100%;}
li      {width:100%}
li a    {padding: 6px 0; float:left; width:16%; text-align:center;}

Answer 2

为#navbar添加一个比所有元素都大的宽度。

当窗口调整大小时，无法将导航栏中的最后一项保留在下一行中吗？

2 个答案: