如何在标签字段后面的div中创建灵活的引导线

Question

<div class="titelcontent">
<div class="name">Name</div>
<div class="hzline"></div>
</div>

我希望name div和hzline div在titelcontent中自动适应100％。

标签（例如，名称）的长度会有所不同，我希望红色下划线跨越titlecontent div的剩余空间。

我如何实现以下目标？使用表格很容易做到这一点，但我无法通过span或div弄清楚如何做到这一点。

Answer 1

您可以div使用table，而不是table-cell。

.titlecontent {
    display: table;
}
.name {
    display: table-cell;
    white-space: nowrap;
}
.hzline {
    display: table-cell;
    border-bottom: 3px solid red;
    width: 100%;
}

请参阅DEMO。

Answer 2

或使用display: table的替代方法：

.name {
    float: left;
}
.line-wrapper {
    display: block;
    overflow: hidden;
    padding-top: 6px;
}
.hzline {
    border-bottom: 3px solid red;
    width: 100%;
}

请参阅example。

Answer 3

我猜你看起来像this。请根据我对您发布的图片的理解找到我的解决方案。

HTML

<div>
    <span>Photoshop</span>
</div>
<div>
    <span>Adobe Illustrator</span>
</div>
<div>
    <span>3D Max</span>
</div>
<div>
    <span>Maya</span>
</div>
<div>
    <span>Windows 8 Pro</span>
</div>

CSS

div {
    line-height: 150%;
    border-bottom: 5px solid #d71d00;
}

div span{
    position:relative;
    bottom: -10px;
    background:#fff;
    padding: 0 5px;
    color:#82439a;
    font-size: 16px;
    font-weight: bold;
    font-family: tahoma;
}

请告诉我您的反馈意见。感谢

Answer 4

已更新，允许通过

显示背景图片

您可以通过使用伪元素使标记更紧凑：

<div class="wrapper">
    <div class="inner">Photoshop</div>
</div>

并使用以下CSS样式：

div.wrapper {
    color:#82439a;
    font-size: 16px;
    font-weight: bold;
    font-family: tahoma;
    line-height: 180%;
    background: red url(http://placekitten.com/1000/500) no-repeat left top;
    overflow: hidden;
}

div.inner {
    position: relative;
    display: inner;
    color: yellow;
    padding-right: 0.50em;
    border: 1px dotted yellow;
}

div.inner:after {
    content: "\A0";
    position: absolute;
    bottom: 0;
    left: 100%;
    border-bottom: 5px solid #d71d00;    
    width: 1000%;
}

演示小提琴：http://jsfiddle.net/audetwebdesign/wE8bC/

如何运作

父元素div.wrapper可能包含背景图像或透明，并显示某些祖先元素的背景。您需要设置overflow: hidden。

对于标签（<div.inner>），设置position: relative，然后生成一个100％宽度的伪元素，其底部边框用作下划线。使用绝对定位将div.inner:after放在<div.inner>（left: 100%）的右侧，并使宽度相对较大。伪元素将触发溢出条件，但这通过将溢出隐藏在父元素中来处理。您可以使用填充控制左/右间距。

您可以将display属性设置为inline或inline-block。如果您使用display: inline，它将在IE7中运行;根据样式需要调整线高。

请注意，生成的内容是一个不间断的空格，十六进制代码“\ A0”。

支持IE7

如果您需要支持IE7，如果您使用上一个问题中讨论的inline-block，则需要进行黑客攻击：IE7 does not understand display: inline-block

IE7也不支持table-cell，因此其他一些已发布的解决方案将面临同样的限制。