在CSS中，經(jīng)常會(huì)遇到需要在兩個(gè)div之間添加一個(gè)底部線條的情況。下面我們來學(xué)習(xí)如何實(shí)現(xiàn)這個(gè)效果。

首先，在兩個(gè)div之間添加一個(gè)空的div元素，并為其指定一個(gè)固定高度和底部邊框。代碼如下：

<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="line"></div>
</div>
.line {
height: 1px;
border-bottom: 1px solid #ccc;
}

這樣就可以在兩個(gè)div之間添加一個(gè)灰色的底部線條了。

如果希望使底部線條與兩個(gè)div的寬度一致，可以將空的div設(shè)置為絕對(duì)定位，并設(shè)置left和right值。代碼如下：

.line {
position: absolute;
bottom: 0;
height: 1px;
border-bottom: 1px solid #ccc;
left: 0;
right: 0;
}

這樣就可以實(shí)現(xiàn)底部線條與兩個(gè)div寬度一致的效果了。