使用HTML/CSS创建带标签的水平线规则

我正在尝试创建水平的带有“标签”的种类。理想情况下，这应该是一个很好看的分隔符。使用HTML/CSS创建带标签的水平线规则

我创建了一个的jsfiddle这里：http://jsfiddle.net/9syqG/

左半部分和标题似乎是工作就好了。我只是无法得到线的正确部分来延伸距离的其余部分。

任何人都可以帮忙吗？

2012-04-12 krische

距离对面，你是什么意思？像'width：100％;'？ – sed 2012-04-12 21:11:43

我认为他基本上是试图用图例创建一个fieldset。就像http://stackoverflow.com/questions/2213881/is-it-possible-to-achieve-a-fieldset-like-effect-without-using-the-fieldset？ – Brandon 2012-04-12 21:16:07

所以在一行中会有3个元素。线，文本，线。左边的行是固定的宽度，那么文本就是文本的宽度，然后右边的宽度就是行的其余部分。 – krische 2012-04-12 21:16:59

如果你有一个定义的颜色，你可以设置为背景，并没有任何CSS浏览器的考虑因素，这可能会有所帮助。

更新 - 背景颜色现在是灵活的。

http://jsfiddle.net/9syqG/6/

来源

2012-04-12 21:25:14 mikevoermans

不幸的是我需要文本的背景是透明的。 – krische 2012-04-12 21:36:27

现在更新 - 允许背景更改。 – mikevoermans 2012-04-12 21:41:02

这样做，谢谢！ – krische 2012-04-13 14:14:07

使用HTML/CSS创建带标签的水平线规则

回答

相关问题