Question

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

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

有什么建议吗？

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并且导航显示为默认情况下（作为块）。
请注意，在Firefox上，它非常严格，“行”没有边距或填充，没有背景颜色等
“单元格”没有边距，但填充正常。边界崩溃和边界间距也有效。 “表格”可以有一个边距，就像HTML表格一样。
table-layout: fixed触发其他表格布局算法，非常不同：您设置的宽度由浏览器显示。没有它，浏览器将适应内容的长度（他们可以用非常奇怪的内容创造奇迹，但这通常不是你想要的！）
不再需要border-radius上的前缀：它们适用于现在已经完全消失的Firefox和Chrome / Safari版本：Fx 3.6，Android 2.1，Safari 4-（caniuse）

具有悬停的同等分布式导航栏填充整个li元素

1 个答案: