html - 从父 div 中删除底部边框

Question

我正在尝试从父 div 中删除底部边框。我已经编写了以下 HTML 代码，但我认为我的方法不正确。看到这张图片

这是我的 HTML 代码

<div class="my-label">
    <div style="border-bottom: 1px solid #ECECEC;">
        <div style="border: 1px solid #ECECEC; border-bottom: #fff; width: 100px; height: 30px; margin-left: 30px">

        </div>
    </div>
</div>

jsfiddle http://jsfiddle.net/Sp9Va/

Answer 1

您可以使用伪类在其底部添加一条 1px 的线。

这是新的 CSS:

.tab {
    border: 1px solid #ECECEC; 
    border-bottom: 0 solid white; 
    width: 100px; height: 30px; 
    margin-left: 30px; 
    padding: 10px;
    position: relative;
}

.tab:before {
    content: "";
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 1px;
    background: #ffffff;
}

最后，一个 fiddle :Demo