Question

在我的一个页面上，我有五个相似的div，我希望在顶部以及第一个和最后一个div的底部添加一个边框。

HTML ：

<div class="info_box">
    Text content is here
</div
<div class="info_box">
    Text content is here
</div>

......等等......

CSS ：

.info_box{
    top: 8em;
    float: left;
    max-width:100%;
    max-height: 50px;
    position: relative;
    overflow: hidden;
    background-color: rgba(255, 0, 0, 0.0.5);
}
.info_box:first-child{
    border-top: 1 px solid #666;
}
.info_box:last-child{
    border-bottom: 1 px solid #666;
}

有人能告诉我这里的错误吗？

Answer 1

只需将“with-border”类添加到第一个和最后一个div（或任何想要有边框的div），然后将其添加到您的css中：

.with-border {
    border-bottom: 1 px solid #666;
}

所以你的第一个和最后一个div将是：

<div class="info_box with-border">
    Text content is here
</div>

Answer 2

除非你有两个错误，否则如何使用CSS完全没问题。

您需要删除1和px之间的空格，如下所示。

.info_box:first-child {
    border-top: 1px solid #666;
}
.info_box:last-child{
    border-bottom: 1px solid #666;
}

此外，你需要关闭你的div，你错过了一个结束＆gt;

<div class="info_box">
    Text content is here
</div>
<div class="info_box">
    Text content is here
</div>

那应该为你解决。

如何将第一个孩子和最后一个孩子添加到我的部分？

2 个答案: