css - CSS/html 自动调整线加入左对齐单词和右对齐

Question

我一直试图让一条线加入两个词。第 1 句在左边，第 2 句在右边。所有内容都应该在同一行。

我希望线条灵活并在调整浏览器大小时调整其宽度，但到目前为止，我一直未能做到这一点。

这将类似于：

见jsFiddle

<h1>Heading</h1>
<h1>This is a longer heading</h1>

CSS

---

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

但只有一行加入单词。

Answer 1

这就是你所追求的吗？

现场演示

HTML：

<div class="header">
<div class="headerPart1">Heading</div>
<div class="headerPart2">This is a longer heading</div>
</div>

CSS：

.header {
    overflow: hidden;
    text-align: center;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    vertical-align: middle;
}
.headerPart1, .headerPart2 {
    display: inline-block; 
    clear: none;
}

Answer 2

我想这就是你要找的东西：这是http://jsfiddle.net/gSsGy/1/

我已将 a 添加width: 50%到 h1 元素，然后将其浮动到左侧。

Answer 3

演示：链接

只需添加：

.header {
    overflow: hidden;
    text-align: center;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    vertical-align: middle;

}
h1{
    display: inline-block; 
    clear: none;
}

和 h1 之前的这个 div：

<div class="headercontent">