如何在标题文本上制作字段集图例样式的“背景线”？

Posted 2023-02-16

【中文标题】如何在标题文本上制作字段集图例样式的“背景线”？

【英文标题】：How can I make a fieldset legend-style "background line" on heading text?

【发布时间】：2011-08-24 12:12:34

【问题描述】：

我正在尝试设置标题文本的样式，类似于您的 default legend text 在字段集中的显示方式；也就是说，我想要一条类似删除线的线来达到但不是通过文本。我似乎找不到任何关于如何完成此任务的信息，而且由于在许多其他问题上，Google 总是将我引导到 Stack Overflow 寻求答案，我认为这里有人可以给我建议。

为了更清楚。我正在尝试对标题文本产生这种影响：

                              居中的标题文本                             

有什么办法吗？

【问题讨论】：

您需要支持哪些浏览器？

具体来说，你关心IE7吗？

不，IE8+ 已达到网站所需的最低水平。

我的意思是，IE7 会很好，但如果它妨碍了这样的小功能，我不会抱怨。

有趣的是，有 9 个答案，但没有一个回答了这个问题，因为没有一个与

【参考方案1】：

现在所有最新的浏览器都支持 flexbox，而且距离作者提到 IE8 的要求已经过去了五年，我想用它来构建一个新的解决方案，并从中获得一些乐趣。

各种例子越来越复杂：

https://jsfiddle.net/0mL79b4h/1/

https://jsfiddle.net/0mL79b4h/2/

CSS

div 
  display: flex;
  align-items: center;


div:before,
div:after 
  border: 1px solid #000000;
  border-radius: 2px;
  height: 2px;

  display: block;

  content: "";
  flex: 1;

  width: 100%;


h1 
  text-align: center;

  margin: 8px;

html

<div>
  <h1>Example Text</h1>
</div>

<div>
  <h1>Multi-Line<br>Example Text</h1>
</div>

优点：

使用弹性盒！ 超级简单的 HTML。 可以调整左右不对称性。 零背景问题、无继承颜色等 流体宽度。 多行支持。 Left/Center/Right/Custom Alignment：只需分别调整前后元素的 flex 属性，数字越大，那一侧的空间就越大。完全删除一个以左对齐或右对齐。 玩转边框样式的有趣效果（在这个例子中我实际上选择了圆形边框）。将高度设置为 0px 并使用border-top 代替通用线。

缺点：

使用弹性盒。叫我懒惰，但我在这个例子中没有建立任何向后兼容性，所以它在支持伪元素但不支持 flexbox 的浏览器上看起来很奇怪，尽管最后我检查的是 Chrome（Firefox 等），无论如何，它们都会自动更新。可能想使用一些 Modernizr。

【参考方案2】：

参加聚会有点晚了，但这是我的解决方案：https://jsfiddle.net/g43pt908/

不需要图像，并且不依赖于背景颜色。

HTML

<div class="hr-text">
    <span>Some text</span>
</div>

CSS

.hr-text 
    border-top: 1px solid #999;
    text-align: center;
    background-color: inherit;


.hr-text span 
    display: inline-block;
    position: relative;
    height: 14px;
    top: -12px;
    font-size: 14px;
    font-style: italic;
    color: #666;
    background-color: inherit;
    padding: 0 10px;

【讨论】：

非常好的解决方案！我可能看到的一个问题是，如果它需要在background-image 上，我认为它需要与fixed 附件一起使用，以确保span 中的图像与其容器的对齐.不过，如果这不是问题，这绝对是这里最干净的解决方案。

【参考方案3】：

见：http://jsfiddle.net/thirtydot/jm4VQ/

如果文本需要换行，这是行不通的。在 IE7 中，不会出现一行。

HTML：

<h2><span>Centered Header Text</span></h2>

CSS：

h2 
    text-align: center;
    display: table;
    width: 100%;

h2 > span, h2:before, h2:after 
    display: table-cell;

h2:before, h2:after 
    background: url(http://dummyimage.com/2x1/f0f/fff&text=+) repeat-x center;
    width: 50%;
    content: ' ';

h2 > span 
    white-space: nowrap;
    padding: 0 9px;

【讨论】：

Opera (10.63) 似乎也不支持。

好吧，:before/:after 在 Opera 中工作，所以我不确定原因是什么。很可能，Opera 不喜欢在 :before/:after 中应用过多的样式，但我不知道为什么。但是，一旦我从标题中删除 100% 属性（因为这会导致浮动元素出现故障），您的修复似乎效果很好。谢谢！ :D

【参考方案4】：

这是我在客户网站上使用的：http://jsfiddle.net/TPgE4/

优点：

无需图像 - 立即渲染 使用填充来控制文本两侧的空间 文本可以居中对齐，或左/右对齐 - 只需在 h2 span 样式定义上添加，例如，margin-left: 8px 或 margin-right: 8px，使其看起来不错

缺点：

需要使用附加标签，例如标题标签内的<span>...</span> 为了美观，文字必须占一行 <span> 元素的背景颜色必须与周围的背景颜色相匹配，因此如果您有非纯色背景图像、渐变或图案，它将无法完美匹配

【讨论】：

左对齐：jsfiddle.net/TPgE4/4 右对齐：jsfiddle.net/TPgE4/5

【参考方案5】：

我想出了一个快速、无图像的解决方案，它似乎在 IE 8+ 和其他浏览器中运行良好，而在 IE 6/7 中却可以正常降级：

<h1>CSS 2.1 EXAMPLE</h1>

h1  position: relative; text-align: center; 
h1:first-line  background-color: white; 
h1:before 
    position: absolute;
    z-index: -1;
    content: '';
    left: 0px;
    right: 0px;
    height: 1px;
    top: 50%;
    background-color: black;

不过，它确实有以下限制：

文字必须与整体背景颜色完全匹配，否则会显得很奇怪。 如果您想在文本上添加任何类型的填充，则需要在文本的任一侧使用不间断空格（参见演示）。 标题文本必须始终位于一行（如果宽度固定，效果最佳）。

这是一个演示：http://jsfiddle.net/AndyE/3tFQJ/​

【参考方案6】：

编辑：

<h2><strike>&nbsp;&nbsp;&nbsp;&nbsp;</strike>Your Text Here<strike>&nbsp;&nbsp;&nbsp;&nbsp;</strike></h2>

以下是使用几个简单标签和不间断空格的方法。

我会使用一张图片并收工，但这似乎对我有用：

CSS

  fieldset 
    border-right: 0px;
    border-left: 0px;
    border-bottom: 0px;
    width: 200px;
  
  legend 
    margin: 0 25%;
  

HTML

<fieldset>
  <legend>My Text Here</legend>
</fieldset>

这是我能弄清楚如何用 css 做到这一点的唯一方法。注意宽度是固定的。再一次，我自己不会这样做。

【参考方案7】：

body  padding-top: 100px; 

div.parent 
    text-align: center;
    border-top: 1px solid #ccc;


div.parent div 
    display: inline-block;
    margin-top: -0.8em;
    padding: 0 0.5em;
    background: #fff;

<body>
    <div class="parent">
        <div>My Text Here</div>
    </div>
</body>

这是一个与您的设计相匹配的流体宽度解决方案，在 IE7 中应该没问题（尽管我承认我没有检查）。有几个缺点：

您丢失了字段集/图例语义。 您不能在文本上放置透明背景。

如果您不需要它是流体宽度，onteria_ 的解决方案可能是您最好的选择。

【讨论】：

您应该为您的代码创建一个jsFiddle test case，以便人们快速查看它是否有效。我可以看到这与我的第一个答案和另一个答案（透明背景的东西）具有相同的缺点，并且 OP 已经说过他不能使用它。

【参考方案8】：

这感觉不是一个很好的答案，但无论如何我都会发布它。

见：http://jsfiddle.net/rFmQg/

<h2><span>Centered Header Text</span></h2>

h2 
    background: url(http://dummyimage.com/2x1/f0f/fff&text=+) repeat-x center;
    text-align: center

h2 span 
    background: #fff;
    padding: 0 9px

我不喜欢它，因为：

您必须使用图像。 This. （只有在背景匹配时才有效）

【讨论】：

是的，我考虑过这个，但这对我来说是个大问题，因为有图像背景。如果我的网站使用干净的背景，效果会很好。

你看到我的 cmets 了吗？

我知道了，根据您的回答和 kei 的重做！解决方案是使用图像创意，使用 kei 的重做格式 - 但将其更改为使用表格。 jsfiddle.net/4BZVt/2

@Meshaal：哎呀。我认为“标题文本”是指h1/h2 标签，所以我正在处理这个假设。是的，如果您是willing，那么使用tables for layout 非常容易。我的第二个答案也是使用tables，只是在 IE7 中不起作用并且不是无语义的 HTML 的 CSS 种类。我想使用 HTML table 至少简单易行:)

@thirtydot: 嗯，我的意思是 h1/h2 等 - 但最后，我可以为任何文本设置标题样式，只要达到相同的效果，我就不会特别介意一点额外的代码开销来实现效果。使用表格进行布局从来都不是我的偏好 - 但如有必要，我会使用它。

【参考方案9】：

我不确定这是否适合您的需要...

h1:before, h1:after 
 content: " ------------- ";

【讨论】：

很遗憾没有，因为它不会延伸到文档的边缘。类似的事情可能可以用 javascript 完成，但我会担心跨浏览器问题（更不用说我希望尽可能保持网站无 JS，因为我通常过度依赖它）。

再试一次：jsfiddle.net/4BZVt 这个居中并跨越文档宽度。

这是一个非常创新的方法，但是和三十点的问题一样（有图片背景，无法匹配）：jsfiddle.net/4BZVt/1