css - 最后一个导航按钮没有填满其各自的空间

Question

我在页面顶部有 3 个导航按钮。我将它们的宽度设置为 33%，但注意到最后一个没有填满它应该填满的所有空间，所以我将它的宽度设置为 34%，但仍然没有解决问题。

如果你去http://shacktown.com并将鼠标悬停在“联系人”上，您会看到按钮最右侧的区域没有变成浅灰色，而且我还注意到 border-radius 属性本身也没有应用。

3 个.nav 元素位于#header 元素内。这是相应的 CSS:

    #banner, #header, #content {
        margin: 2.5% 15% 2.5% 15%;
    }
    #header, #content {
        border-radius: 0.375em;
        background-image: url('http://shacktown.com/engine/img/trans.png');
    }
    .nav {
        height: 2em;
        padding-top: 1.0em;
        text-align: center;
        color: #000000;
        font-size: 1.2em;
        float: left;
        width: 33%;
        cursor: pointer;
        border-left: 0.1em solid #333333;
    }
    .nav:hover, .navSelected {
        background-image: url('http://shacktown.com/engine/img/trans.png');
    }
    .navSelected {
        cursor: default;
    }
    .nav:first-of-type {
        border-radius: 0.375em 0 0 0.375em;
        border-left: none;
    }
    .nav:last-of-type {
        border-radius: 0 0.375em 0.375em 0;
        width: 34%;
    }

知道为什么它没有填满整个空间吗？

Answer 1

:last-of-type 或 :first-of-type css 选择器不应该像这样工作。在您的情况下，此选择器将选择其父项中的最后一个“div”或第一个“div”。

所以从 html 中删除这一行:

<div style="clear: both;"></div>

并将类导航的宽度更改为 %33.3

这些就可以了。