从父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;
}

最后，小提琴：Demo

Answer 2

相对定位并将其向下轻推1px，以便覆盖其父级边框：

position:relative;
top:1px;

JSFiddle

Answer 3

标签的边框插入容器中;它没有覆盖集装箱的边界。

您可以设置负底边距以更正：

.headerbar {
    border-bottom: 1px solid #ECECEC;
}

.headertab {
    border: 1px solid #ECECEC; 
    border-bottom: 1px solid #fff; 
    width: 100px; 
    height: 30px; 
    margin-left: 30px; 
    margin-bottom: -1px;
    padding: 10px
}

示例：http://jsfiddle.net/Sp9Va/4/

Answer 4

添加

margin-bottom: -1px;

为了重叠边框。

为了保持宽度和风格，您还必须使用border-bottom-color: #fff代替border-bottom: #fff。

Demo