如何让我的导航菜单填满浏览器窗口而没有任何间隙？

Question

我使用浮动并尝试将导航菜单中的三个按钮中的每一个保持在~33.3％，这样它就会填满屏幕并且当窗口大小缩小时不会中断，也不应该离开浏览器窗口变宽时，两端的间隙。

这是一个小提琴http://jsfiddle.net/xxd1vdcj/1/

<div id ="nav">
    <ul>
        <li id="dawn" >Tradition</li>
        <li id="dusk" >Styles</li>
        <li id="night">Contact</li>

    </ul>
</div>

#nav ul li{
    display:block;
    //width:19.3%;
    width: 33%;
    line-height: 3em;
    margin:0 auto;
    padding:0;
    text-align:center;
    float:left;
    background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#111));
    color: #b0c4ff;
    font-size: 18px;
    margin-top: 140px;
    opacity: 1;
    border: 1px solid black;
}

Answer 1

正如我在评论中所说，<a>不是有效的<ul>孩子。

100/3 = 33.333 ..但您使用了33%，在三个LI宽度的1px（最多6px）的较大屏幕尺寸上，比调整页面大小时，剩余的可用宽度％不足以包含固定的（1px）边框宽度，导致LI在最近的可用空间下方断开。

使用box-sizing

有些box-sizing会解决您的边框问题，从而增加可用空间。

*{margin:0; padding:0;} /* Global reset (also to remove 8px margin from Body) */

#nav ul{
    display:block;
    margin:10px;
    margin-top: 140px;
}
#nav ul li{
    box-sizing:border-box;
    border: 1px solid black;

    display:block;
    float:left;
    width: 33%;
    line-height: 3em;
    text-align:center;
    color: #b0c4ff;
    font-size: 18px;
}

http://jsfiddle.net/xxd1vdcj/5/
现在，您甚至可以使用33.333%作为LI宽度。

---

使用display:table和table-layout

由于旧版浏览器<{1}} 不支持，您可以使用这个简单的解决方案：

box-sizing

擅长*{margin:0;padding:0;} #nav{ margin:10px; margin-top: 140px; } #nav ul{ display:table; /* Table!! yey */ width:100%; table-layout: fixed; /* To fix LI widths */ } #nav ul li{ border: 1px solid black; display: table-cell; /* Note */ line-height: 3em; text-align:center; color: #b0c4ff; font-size: 18px; } s出生的地方！

http://jsfiddle.net/xxd1vdcj/7/