html - 如何让 2 个单独的 边框折叠？

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

您需要表格显示才能使用 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>