更好的方法是让子元素的边框与父元素重叠

Question

我正在研究一个需要CSS帮助的项目：

以下是我想要实现的目标的描述：

父元素（title）底部有一些填充和2px边框。它还有一个子（title-inner），它也有一些填充和2px边框，但颜色不同，它与它的父级边界重叠，即title。

我正在使用这个标记结构：

<div class="title">
    <div class="title-inner">Widget title</div>
</div>

我知道这两个元素的填充和边距属性都有一些调整是可行的，但到目前为止我写的CSS在移动设备或浏览器调整大小时有所中断（看一下{ {3}}）。

有没有更好的方法在CSS中显示这种效果？有什么想法吗？

Answer 1

不是将padding同时提供给子元素和父元素，而是最好将填充赋予子元素，然后添加负数margin以使边框相互重叠。

body {
    background: black;
    color: #ddd;
    font-family: Helvetica, sans-serif;
    margin: 2em;
}

.title {
    border-bottom: 2px solid;
}

.title-inner {
    display: inline-block;
    vertical-align: bottom;
    padding-bottom: 16px;
    margin-bottom: -2px;
    border-bottom: 2px solid #E64998;
}

<div class="title">
    <span class="title-inner">Lorem Ipsum</span>
</div>

Answer 2

另一个选择是为您的子元素使用绝对定位：

.title {
   border-bottom: 2px solid;
   position: relative;
   padding-bottom:20px;
   height: 20px;
}

.title-inner {
   display: inline-block;
   position: absolute;
   width: 50%;
   height: 100%;
   border-bottom: 2px solid #E64998;
 }

请注意，我添加了50％的宽度，如图片示例所示。

http://jsfiddle.net/v1ut1pyv/5/

Answer 3

我认为最酷的选择是使用背景，div和宽度。

Animation Demo

使用div代替边框可以让您更好地控制元素。

<div class="title">
    <div class="title-inner">Lorem Ipsum</div>
    <div id='line'>
        <div id='load'></div>
    </div>
</div>

使用你的div后你设置了css

body {
    background: black;
    color: #ddd;
    font-family: Helvetica, sans-serif;
    margin: 2em;
}
.title-inner {
    padding: 17px;
}
#line {
    background-color:purple;
    height:2px;
    width:100%;
}
#load {
    background-color:yellow;
    height:100%;
    width:0%;
}

然后你可以使用javascript操作代码。

   function loop() {
        $('#load').animate({
            width: "50%"
        }, 1600);
        $('#load').promise().done(function () {
            $(this).width(0);
            loop();
        });

    }
loop();