Question

我已经获得了一个具有特定标题的设计类型，类似于：

------ Text Content ------

多年来我已经做了几次，但我对我的解决方案感到满意。通常涉及使用众多元素。因为这些标题就像保持标记尽可能精简一样。

这次我第一次想到的是使用盒子折叠对我有利：http://jsfiddle.net/cEcCL/

但是这里有一些问题：

这依赖于将span的背景设置为不透明的东西以便敲除线条。问题是大多数这些可能会在页面的上半部分中，渐变背景尚未褪色为实体
实际上我没有意识到这一点，直到我做了小提琴 - 文字似乎略微偏离中心，不知道为什么会这样。
虽然它可以被管理，但我担心垂直偏移的稳健性使文本行框的中间线居中。如果我有2个行的长标题怎么办？ / p>

有没有人有任何其他想法？

Answer 1

Here's a very quick example使用单个h2和前/后伪元素。

h2:before, h2:after {
    content:' '; display:inline-block;
    height:0; width:100px;
    border-top:1px solid black;
    vertical-align:middle;
    margin:0 1em
}

显然，存在一些缺点：

没有IE6 / 7支持
就目前而言，你必须明确地声明行的宽度（但你可能会弄乱这个）
不能很好地处理多行，但同样，你可以编辑h2样式以使这项工作更好一点

Answer 2

虽然不是一个完美的解决方案（我觉得你很痛苦，但这很难），如果你使用的是背景，有时你可以使用background-attachment:fixed使用<span>技术来解决背景问题图像：

演示：http://jsfiddle.net/cEcCL/3/

<h2><span>Text Content</span></h2>

h2 span,
body{ /* Apply to h2 span and whatever the parent element is */
    background:url(background.gif) fixed;    
}
h2 {
    line-height: 10px;
    font-size: 18px;
    text-align: center;
    padding: 5px 0;
}
h2:after{
    content:" ";
    float:left;
    border-bottom: 1px solid #000;
    width:100%;
    height:10px;
    margin-top:-15px;
}

当然，这只有在父元素可以具有固定背景图像时才有效，并且不适用于CSS3渐变背景。这是一个有限使用的想法，但我只是认为我会把它揭露出来。

似乎只有<legend>个标签有这种行为，我知道无法用CSS模拟它，我认为你不想开始使用<legends>作为标题。 ..

在CSS中完成淘汰规则的最佳方法

2 个答案: