0

我想得到以下结果：

__ _ __ _ __ _ __ _ ___ _页面标题

因此，假设 html 标记是<h1>Title of page</h1>并且 h1 设置为width:100%and text-align:right，我希望它只在标题的左侧加下划线。

任何线索如何做到这一点？我试图将标题包装在 a 中<div>，给它一个白色背景并将其向下移动一点，因此它与 h1 框的底部重叠，但是，我不知道这是否 100% 跨浏览器有效。

4

4 回答 4

2

只要该行对显示内容并不重要，您就可以尝试此操作，因为它支持 IE8+。

h1:before{content:"________________"}​

jsfiddle在这里

于 2012-02-29T16:21:37.303 回答
2

替代解决方案：

<div style="width:100%;float:left;border-bottom:1px solid">
 <h1 style="float:right;background-color:white;padding:1px;position:relative;top:1px">Hola</h1>
</div>​

http://jsfiddle.net/VMCax/1/

于 2012-02-29T16:24:09.597 回答
1

看起来你正在尝试做的事情会更好地通过包装容器和内部浮动来实现。使内部 div（或浮动 h1）具有白色背景。使外部 div 具有与文本 div 的 line-height 相同的间距的重复（repeat-y）背景。

确保包装器 div 尊重浮动 div（溢出：隐藏或在浮动末尾有一个清晰的 div。

这将为您提供您正在寻找的效果，并且也应该与多行标题一起使用。

于 2012-02-29T16:22:03.033 回答
1

我会使用 CSS 生成的内容，带有不间断的空格和下划线：http: //jsfiddle.net/JMVUa/1/

h1:before{
    content:"\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0";
    text-decoration: underline;
}​
于 2012-02-29T16:28:42.620 回答