在CSS中，如何创建一个垂直居中的线，占用块元素后剩余的水平空间？

我正在实现一个包含语义标题（h3，h4等）的元素的设计，它们是全宽度块元素，后面跟着一个垂直居中的水平线，它扩展了标题a的全部宽度：在CSS中，如何创建一个垂直居中的线，占用块元素后剩余的水平空间？

headers

我知道我可以照顾这通过在<div>包裹每个头和插入后，另一个块级元素，但宁愿不污染我的HTML这样。我的第一个倾向是在头部使用::after元素，像这样：

.line-header::after { 
    content:'\00a0'; 
    display: inline-block; 
    float: right; 
    width: 55%; 
    margin-top: -12px; 
    border-bottom: 1px solid gray; 
}

然而，这需要使得::after元素固定宽度，这显然不符合不同宽度头工作：http://jsfiddle.net/nbSTf/

关于如何获得一个可变宽度的行的任何想法，它将填充头部右侧的空间，而不会在HTML中插入额外的元素？

编辑：下面（暗示绘制标题的后面线全宽并设置背景颜色擦除文本后面的线） Tyriar的回答提醒我，这是发生在一个重复的背景图像的前面 - 不幸的是没有背景技巧可能。

来源

2013-03-15 Eric P

试试这个为你的CSS：

编辑：

body { background: red; overflow-x: hidden } 

.line-header { 
    margin-top: 15px; 
    margin-right: 5px; 
    display: inline; 
    z-index: 100; 
    float: left; 
    clear: left; 
} 

.line-header::after { 
    position:absolute; 
    content:'\00a0'; 
    width: 100%; 
    margin-top: -12px; 
    margin-left: 5px; 
    border-bottom: 1px solid gray; 
    z-index: 0; 
}

我只在Chrome中测试了这个。 Here's the Fiddle。

来源

2013-03-15 01:58:29

我对你的方法印象深刻，并不知道发生了什么。我曾经玩过它，显然它可以很容易地打破，没有围绕'.line-header'的包装http://jsfiddle.net/Tyriar/uJ5ww/仍然，很好的解决方案:) – 2013-03-15 09:32:01

这是一个有趣的解决方案 - 然而，甚至在Tyriar的小提琴中，包装div将“宽度：100％”约束到合理的数量，如果滚动到结果窗格的右侧，水平线仍然是相同的宽度，正确的 - 我有同样的问题，但相反。 :)我需要它们排列在包含元素的RH边缘。我错过了什么吗？ – 2013-03-15 20:41:04

@Eric P我的小提琴展示了一个反例，而不是修复。溢出x也可能是不够的。这只会在内容不在页面中心并且不需要填充时才起作用。 – 2013-03-16 00:56:47

这里有一个方法，你可以做到这一点，不幸的是它依赖于一个属性（不一定是title），但这可以很容易地用JavaScript编程设置。

它使用:before和:after伪构件，:after用于绘制线的整个宽度和:before用于绘制文本的大小的文本后面白色背景。伪元素需要正确设置其z-index以正确的顺序进行分层。

jsFiddle

Screenshot of example

HTML

<h3 class="line-header" title="Longer Header Looks Good">Longer Header Looks Good</h3> 
<h3 class="line-header" title="Short Doesn't">Short Doesn't</h3>

CSS

.line-header { 
    margin-top: 15px; 
    position:relative; 
} 
.line-header:before { 
    position: absolute; 
    display:block; 
    top:0; 
    left:0; 
    bottom:0; 
    content: attr(title); 
    background-color:#FFF; 
    color:#FFF; 
    z-index:-1; 
    padding-right:.5em; 
} 
.line-header::after { 
    position:absolute; 
    content:''; 
    display: block; 
    left:0; 
    right:0; 
    top:50%; 
    background-color:#555; 
    height:1px; 
    z-index:-2; 
}

来源

2013-03-15 01:48:56

谢谢，Tyriar - 我最初是在寻找一些非常像这样的东西，但不幸的是，标题背后的背景是一个重复的图像，它们混合了背景技巧。我将编辑这个问题来澄清这一点。 – 2013-03-15 20:27:09

是的，如果你有一个平铺的背景，它会变得更加艰难。 – 2013-03-16 00:57:53

那么，如何做相反呢？绘制线条（以任何你喜欢的方式），然后使用:after来插入标题，没有额外的HTML，但一些额外的CSS。

HTML

<div id="header1"></div> 
<div id="header2"></div>

划清界线，只是border-top-style:solid;。撰写标题，:after。

CSS

div 
{ 
    position:relative; 
    border-top-style:solid; 
    margin-top:20px; /* just for spacing */ 
} 
div:after 
{ 
    display:block; 
    background-color: #FFFFFF; 
    position:absolute; 
    top:-10px; 
    left:0px; 
} 
#header1:after 
{ 
    content:"Hello;" 
} 
#header2:after 
{ 
    content:"Hello Again"; 
}

你就会得到这样this。

如需更多定制，您可以放大字体，更改颜色，添加填充（用于更多空白区域），只需更改top它适合您的方式即可。

来源

2013-03-15 02:32:39

在CSS中，如何创建一个垂直居中的线，占用块元素后剩余的水平空间？

回答

相关问题