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;
}

DEMO

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的边框。

如何让2个单独的<div>边界崩溃？

3 个答案: