如何分開獲得2 <div> 邊界崩潰？

Question

我正在嘗試折疊2個單獨div的邊界

<ul>
    <li>
        <a href="javascript:void(0)">
            <div class="acell">
                <p class="bump">
                    Kingdom
                </p>
            </div>
        </a>
    </li>
    <li>
        <a href="javascript:void(0)">
            <div class="acell">
                <p class="bump">
                    Advisors
                </p>
            </div>
        </a>
    </li>
</ul>

我的css是：

#menubar ul, #menubar li {
    margin: 0;
    padding: 0;
}
#menubar .acell {
    width: 98px;
    padding: 0;
    margin: 0;
    border: 1px solid black;
    border-collapse: collapse;
    background-color: orange;
}

#menubar .bump{
    margin: 0px 0px 0px 5px;
}

邊框顯示在每個上，但是當2個div彼此相鄰時，它們顯示為2px（2x 1px）。 我怎樣才能將其顯示為兩者之間的1px邊框？

謝謝！

Answer 1

給它一個邊框，但刪除一個邊框（從左或右），為最后一個孩子添加另一個類，並添加缺少的邊框：

.container div{
    border: solid 1px #aaa;
    border-right:none;
}

.container div:last-child{
    border-right:solid 1px #aaa;
}

演示

Answer 2

您需要表格顯示才能使用border-collapse ：

 #menubar { display: table; border-collapse: collapse; } #menubar > li { display: table-cell; border: 1px solid black; width: 98px; background-color: orange; } 

 <ul id="menubar"> <li> <a>Kingdom</a> </li> <li> <a>Advisors</a> </li> </ul> 

Answer 3

您可以使用媒體查詢並將其設置為在兩個框相鄰時刪除：first-element的邊框。