Ich versuche, eine horizontale Trennlinie mit etwas Text zu erstellen. Zum Beispiel:
---------------------------------- Hier ist mein Titel------ -- ---------------------
Gibt es eine Möglichkeit, diesen Effekt in CSS zu erzielen? Natürlich ist es nicht notwendig, alle „-“-Gedankenstriche zu verwenden.
尝试了不同的解决方案后，我找到了一个适用于不同文本宽度、任何可能的背景且不添加额外标记的有效解决方案。
h1 { overflow: hidden; text-align: center; } h1:before, h1:after { background-color: #000; content: ""; display: inline-block; height: 1px; position: relative; vertical-align: middle; width: 50%; } h1:before { right: 0.5em; margin-left: -50%; } h1:after { left: 0.5em; margin-right: -50%; }我在IE8、IE9、Firefox和Chrome中进行了测试。您可以在这里检查它：http://jsfiddle.net/Puigcerber/vLwDf/1/
这大致是我会这样做的：通过在包含的
h2上设置border-bottom，然后给h2设置较小的line-height来创建线条。然后将文本放在一个嵌套的span中，具有非透明的背景。h2 { width: 100%; text-align: center; border-bottom: 1px solid #000; line-height: 0.1em; margin: 10px 0 20px; } h2 span { background:#fff; padding:0 10px; }