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

我希望namediv 和hzlinediv 自动适应 100% 的titelcontent.

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

我如何实现以下目标？使用表格很容易做到这一点，但我不知道如何通过span或来做到这一点div。

http://s22.postimg.org/zdxtj9da9/Untitled_1.png

4

4 回答 4

3

您可以使用divlike a tableby using table-cell。

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

见演示。

于 2013-04-25T10:35:23.897 回答
0

更新以允许背景图像显示

您可以使用伪元素使标记更严格，如下所示：

<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按照上一个问题中的讨论使用，则需要 hack：IE7 不理解显示：inline-block

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

于 2013-04-25T11:51:50.987 回答
0

或替代使用display: table：

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

见例子。

于 2013-04-25T10:44:56.693 回答
0

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

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

请让我知道您的反馈。谢谢

于 2013-04-25T10:45:21.080 回答