时间戳

首页 > 解决方案 > 引导标签边框重叠

html - 引导标签边框重叠

问题描述

我有如下 div ，每个 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 内部，而不是表格。

标签： htmlcssbootstrap-4

解决方案

border-collapse CSS 属性设置 a 内的单元格是否<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>

推荐阅读