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

这就是你想要的吗？

Live demo

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