最后一个导航按钮不会填充其各自的空间

Question

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

如果您转到http://shacktown.com并将鼠标悬停在“联系人”上，则会看到该按钮的最右侧区域没有变为浅灰色，我还注意到border-radius属性没有＆＃39 ; t也适用。

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选择器不应该像这样工作。在您的情况下，此选择器将选择最后一个＆＃34; div＆＃34;或者第一个＆＃34; div＆＃34;在他们的父母。

所以从html中删除这一行：

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

并将类nav的宽度更改为％33.3

这些都可以解决问题。

Answer 2

将.nav的规则更改为以下内容：

.nav {
    height: 2em;
    padding: 1em 0 2.5em 0;
    text-align: center;
    color: #000;
    font-size: 1.2em;
    float: left;
    cursor: pointer;
    border-left: 0.1em solid #565656;
    width: 33.33%;
    box-sizing: border-box;
}

并添加新规则：

.nav:last-of-type:hover {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

删除标记中的空格：

这就是你得到的结果。

Answer 3

没有只有类的选择器

CSS: How to say .class:last-of-type [classes, not elements!]

所以你可以做到

将.nav设置为display:inline-block并移除clear div以便它们是内联的

这是演示

＆＃13;

＆＃13;

.cont {
  font-size: 0px; /* is added to remove whitespace from inline-block */
}
.cont div {
  display: inline-block;
  font-size: 16px;
}
.cont div:first-of-type,
.float div.test:first-of-type {
  background: red;
}
.cont div:last-of-type,
.float div.test:last-of-type {
  background: red;
}
.float .test {
  float: left;
}
.float .clear {
  clear: both;
}

＆＃13;

<p>used inline-block instead of float</p>
<div class="cont">
  <div>test</div>
  <div>test</div>
  <div>test</div>
  <div>test</div>
</div>
<p>with class and used float</p>
<div class="float">
  <div class="test">test</div>
  <div class="test">test</div>
  <div class="test">test</div>
  <div class="test">test</div>
  <div class="clear"></div>
</div>

＆＃13;

＆＃13;

＆＃13;