Question

我有如下div，每个在labelStyle类中定义的边框均为1px。

.labelStyle {
    text-align: left; 
    padding: 0px; 
    font-weight: 0px;
    font-size: 8px;
    border: 1px solid;
    margin-bottom: 0;
    border-collapse: collapse;
}


<div class="col-sm-6" style="padding-left: 0px;padding-right: 2px;">
    <div class="row">
        <label class="col-sm-6 labelStyle">Name</label>
        <label class="col-sm-6 labelStyle">{{name}}</label>
    </div>
    <div class="row">
        <label class="col-sm-6 labelStyle">Number</label>
        <label class="col-sm-6 labelStyle">{{num}}</label>
    </div>
    <div class="row">
        <label class="col-sm-6 labelStyle">Zip</label>
        <label class="col-sm-6 labelStyle">{{zip}}</label>
    </div>  
</div>

由于相邻标签均具有定义的边框，因此渲染时会显得较暗。我想在这里使用border-collapse：collapse sortof功能。我尝试使用border-collapse，但是没有用。基本上，每个标签都应定义顶部和侧面边框，而不是底部。但是，最后一个标签应定义底边框。最好的方法是什么？这些元素位于DIV中，而不是表中。

Answer 1

border-collapse CSS属性设置<table>中的单元格是否具有共享或单独的边界。（MDN）

由于您不处理表格，因此可以将margin-top设置为-1px，这样它将覆盖占用1px的重复边框（如果也更改了margin-top）。

div {border: 1px solid black; margin-top: -1px;}

<div>bla bla bla 1</div>
<div>bla bla bla 2</div>
<div>bla bla bla 3</div>
<div>bla bla bla 4</div>
<div>bla bla bla 5</div>

引导标签边框重叠

1 个答案: