Question

我一直试图将一行加入两个单词。句子1在左边，没有2在右边。所有东西都应该在同一条线上。

我希望线条具有灵活性，并在重新调整浏览器大小时调整其宽度，并且到目前为止仍然无法做到这一点。

这与此类似：

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

Answer 2

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

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

Answer 3

演示：LINK

只需添加：

.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">

CSS / html自动调整线连接左对齐字和右对齐

3 个答案: