1

这是一个演示：http: //jsbin.com/egezog/edit#html,live

抱歉，如果这是新手，但我无法弄清楚。我有一个标题，我需要（出于装饰目的）从它的边缘到页面右侧的一条线（不是实际的页面，而是一个包装器，但无论如何我都隐藏了溢出）。包装器的宽度是固定的，但标题的长度会有所不同。我不能使用绝对位置，而且我不喜欢使用表格。如果我们解决这个问题...

在这里：http: //jsbin.com/ibecv/edit#html,live。所以最后，我实际上更喜欢这一切都是正确的。你可能会问，如果有建议，为什么我需要建议？好吧，正如您所看到的，标题分两行，这在我的情况下是不可接受的，而且我不喜欢使用表格。

我想我可以使用 float:right, 来右对齐，但是，这取决于我希望你给我建议的实现。谢谢！

PS: jsfiddle 现在对我来说已经失败了，所以我在这里使用了 jsbin。

4

3 回答 3

2

http://jsbin.com/ujiquq/edit#html,live

适用于 IE8 和所有现代浏览器。父元素的背景可以是任何东西。无论选择什么，该线仍将垂直居中font-size。

HTML：

<h3><span>The title</span></h3>

CSS：

h3:after {
    content: '\00200B';
    background: url(data:image/gif;base64,R0lGODlhAgABAIAAAP8AAAAAACH5BAAAAAAALAAAAAACAAEAAAICBAoAOw==) left center repeat-x;
    display: block;
    overflow: hidden;
}
h3 > span {
    float: right;
    padding-left: 5px;
}
于 2012-06-29T11:59:28.833 回答
1

像这样写：

HTML

<div class="title"><span>Title Here</span></div>

CSS

.title {text-align:right;border-bottom:1px solid red;}
  span{background:#fff;float:right;margin-top:-9px;}

检查这个http://jsbin.com/ibeciv/3/edit

更新

检查这个http://jsbin.com/ibeciv/4/edit

于 2012-06-29T11:24:40.860 回答
1

这是一个不使用表格的解决方案：

http://jsbin.com/ujawej/5/edit

这是带表格的那个（来自我的评论）：

http://jsbin.com/osovev/2

于 2012-06-29T11:26:24.993 回答