Question

以下是演示：http://jsbin.com/egezog/edit#html,live

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

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

我想我可以使用float：对，右对齐，但是，这取决于我希望你会告诉我的实现。谢谢！

PS：jsfiddle现在对我不利，所以我在这里使用了jsbin。

Answer 1

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;
}

Answer 2

像这样写：

<强> 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

Answer 3

以下是不使用表格的解决方案：

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

这是带桌子的那个（来自我的评论）：

http://jsbin.com/osovev/2

元素的左边缘是动态的（内联...），但是右边缘是固定的吗？

3 个答案: