均匀分布的导航栏，带有悬停填充整个 li 元素

Question

我试图找到解决我的问题的方法，并且许多其他问题都类似，但我似乎无法解决这个问题。 CSS 从来都不是我的强项，所以我试图更好地掌握流畅的布局。

我有一个带有 3 个链接的导航栏。我希望每个链接占用均匀分布的空间，当用户将鼠标悬停在链接上时，我希望整个 li 元素突出显示。我遇到的问题是导航栏最右侧的最后一个小部分在悬停时总是留下一个空间。它让我疯狂。此外，如果您减小浏览器大小，最终最左侧的链接将弹出。我也想尝试避免这种情况，但我似乎无法让它发挥作用。 jsfiddlehere

有什么建议吗？

HTML：

<nav>
        <ul>
            <li>
                <a href="managers.html">
                    Building Managers and Owners
                </a>
            </li>
            <li>
                <a href="contractors.html">
                    Contractors
                </a>
            </li>
            <li>
                <a href="architects.html">
                    Architects
                </a>
            </li>
        </ul>
    </nav>

CSS：

nav {
    background:     #303030;
    font-size:      1em;
    font-weight:    100;
    height:         40px;
    line-height:    40px;
    margin:         0 auto 2em auto;
    padding:        0;
    width:          100%;

    border-radius:          5px;
    -moz-border-radius:     5px;
    -webkit-border-radius:  5px;

}

nav ul{
    width:      100%;
    maring:     0;
    padding:    0;
    overflow:   hidden;
    list-style: none;
}

nav li {    
    width:          33.1%;
    float:          left;
    text-align:     center;
    border-left:    1px inset;
    border-right:   1px inset;
    padding:0;
}


nav a:link, nav a:visited
{
    color:              #FFF;
    text-decoration:    none;
}

nav li:hover {
    background:     #556e8c;
}

nav li:first-child  {
    border-right:   1px inset;
    border-left:    none;
}

nav li:last-child  {
    border-right:   none;
    border-left:    1px inset;
}




nav li:first-child:hover  {

    border-top-left-radius:             5px;
    -moz-border-radius-topleft:         5px;
    -webkit-border-top-left-radius:     5px;
    border-bottom-left-radius:          5px;
    -moz-border-radius-bottomleft:      5px;
    -webkit-border-bottom-left-radius:  5px;
    }

nav li:last-child:hover  {
    border-top-right-radius:                5px;
    -moz-border-radius-topright:            5px;
    -webkit-border-top-right-radius:        5px;
    border-bottom-right-radius:             5px;
    -moz-border-radius-bottomright:         5px;
    -webkit-border-bottom-right-radius:     5px;
}    

Answer 1

使用 display: table（和 table-cell，这是 CSS 表格布局，与 HTML 表格元素的使用以及它们不用于显示数据时的不良语义无关......）允许保持在一行的链接。我认为它也解决了您的右侧间隙问题，但我不确定。

http://jsfiddle.net/53dpC/2/

• 每个 li 显示为 display: table-cell，父级显示为 display: table。这里 ul 显示为行，但在这种简单的情况下，它可以显示为 display: table 并且默认情况下会显示 nav （作为一个块）。
• 请注意，在 Firefox 上，它非常严格，“行”上没有边距或填充，没有背景颜色等
• “单元格”上没有边距，但填充没问题。边框折叠和边框间距也可以。 “表格”可以有边距，就像 HTML 表格一样。
• table-layout: fixed 触发其他表格布局算法，非常不同：您设置的宽度由浏览器显示。没有它，浏览器将适应内容的长度（它们可以用非常奇怪的内容创造奇迹，但这通常不是你想要的！）
• border-radius 上的前缀不再需要：它们适用于现已完全消失的 Firefox 和 Chrome/Safari 版本：Fx 3.6、Android 2.1、Safari 4- (caniuse)