Question

是否可以在不改变相交边框宽度的情况下重叠两个边框？我知道我可以为底部border-top: none;设置div，但我正在寻找另一种解决方案。

谢谢。

更新我更喜欢全球解决方案

这是一个例子：

.box{
    border: solid thin;
}

<div class="box">Test></div>
<div class="box">Test1</div>

Answer 1

您可以尝试添加负边距，但您可能希望使用id或其他内容单独定位div（如果您希望更全局，则可以使用新类）。

＆＃13;

.box{
    border: solid thin;
    margin-top: -1px;
}

＆＃13;

<div class="box">Test></div>
<div class="box">Test1</div>

＆＃13;

正如评论中所提到的，你应该使用px（而不是＆＃34; thin＆＃34;），特别是如果你的边框大小超过1px（即使你没有做好练习），因为如果你改变边框大小，你必须相应地改变负边距。

Answer 2

嗯，这是一个替代解决方案，因为你要求它。

＆＃13;

.table {
    display: table;
    border-collapse: collapse;
    width: 100%;
}
.box {
    border: solid thin;
    display: table-row;
}

＆＃13;

<div class="table">
    <div class="box">Test</div>
    <div class="box">Test1</div>
</div>

＆＃13;

Answer 3

使用+选择器，它会检查.box是否有下一个兄弟，并从中删除border

＆＃13;

.box {
  border: solid thin;
}
.box + .box {
  border-top: 0;
}

＆＃13;

<div class="box">Test></div>
<div class="box">Test1</div>
<div class="box">Test1</div>
<div class="box">Test1</div>
<div class="box">Test1</div>
<div class="box">Test1</div>
<div class="box">Test1</div>
<div class="box">Test1</div>
<div class="box">Test1</div>

＆＃13;

Answer 4

我不确定这是否构成另一种方式，＆＃34;但这是一种没有负边际的方法。

＆＃13;

.outer-box {
  border: solid thin;
}
.box:not(:last-child) {
  border-bottom: solid thin;
}

＆＃13;

<div class="outer-box">
  <div class="box">
    Test
  </div>
  <div class="box">
    Test 2
  </div>
</div>

＆＃13;

当两个边框重叠时，如何避免边框宽度的变化？

4 个答案: