如何在一条线上布置两个<div>，并且一个中心对齐（相对于整条线），另一条右对齐？</div>

Question

我想在一行中显示2个div。我有一个父div和两个子div。我想保持第一个子div和父div的宽度相等。所以标题（第一个子div的标签）总是显示父div的中间位置，我想在父div的同一行右侧显示第二个子div。（条件总是第一个子div的标签应显示中间父母div）。这是jsfiddle。

Answer 1

这是一个更新的jsfiddle。阅读display属性！

Answer 2

如果我为网站设计了这个标题部分的样式，并且我希望在设计各种元素时有一些灵活性，那么我就会开始。

对于我的HTML：

<div class="head">
    <div class="innerfirst">
         <h1>ABCDEF GHIJ</h1>
    </div>
    <div class="innersecond">
        <label>RIGHT1</label>
        <label>RIGHT2</label>
    </div>
</div>

我会将页面标题放在<h1>标记中，以便我可以调整字体大小，填充，背景颜色等。实际上，您可以在标题行下方添加标记行和各种背景图像。拥有.innerfirst和h1会给您带来很大的灵活性。

在此上下文中，<label>标记在语义上没有意义，但是您可能稍后会像搜索框一样拥有输入字段。

对于CSS：

.head {
    background-color:#2191C0;
    width: 100%;
    height: 85px;
    position: relative;
}

以上情况很好，设置position: relative，以便您可以对其中一个子元素使用绝对定位。固定高度是个好主意，可以更容易地垂直调整元素。

.innerfirst {
}
.innerfirst h1 {
    text-align: center;
    color: #FCFCFC;
    padding-top: 10px; /* You could also use a margin... */
}

默认情况下，.innerfirst的宽度为100％，因为它是一个流内块元素，与h1元素相同。您可以将文本置于h1中心，并根据需要调整颜色，填充和边距。

.innersecond {
    border: 2px solid lightgray;
    color: white;
    position: absolute;
    width: 25%; /* Set this or by default it will shrink-to-fit content */
    height: 61px; /* Set this or by default it will shrink-to-fit content */
    top: 5px;
    right: 5px;
    padding: 5px;
}

你可以做的是创建一个文本框并将其绝对放在右边。这是个好主意 设置高度和宽度，否则，作为绝对定位的结果，div将缩小以适合内容，这有时是有用的。顶部和右侧偏移将.innersecond定位到父容器的右上角，因为您在position: relative中设置了.head。

.innersecond label {
    display: block; /* optional if you want block behavior */
    border: 1px dotted white;
}

最后，如果您希望label标记的行为类似于块，请根据您的设计要求使用display: block和样式。

供参考，演示小提琴：http://jsfiddle.net/audetwebdesign/qpb9P/