将HTML DIV子元素水平对齐

Question

我是一名新手，正在学习HTML和CSS开发。我想让所有子元素在父元素中水平排列。

我的HTML代码：

<div class="parent">
        <h1>Hello</h1>
        <h1>World</h1>
</div>

我按照其他人的建议，在.parent上使用了inline-block，但输出仍然是：

Hello
World

替代

Hello World

有什么想法吗？

- Gusti Arya

---

使用inline-block替代子元素h1。 - Viktor Kireev

Answer 1

你需要的属性是 display: inline;，这将使每个标签呈现为“彼此内联”。

.parent h1 {
    display: inline;
}

您也可以使用浮动标签，但我建议不要这样做，因为如果您在.parent容器内添加任何其他标签，它会打破文本的流动。

JSfiddle示例

- Mathias Rechtzigel

---

这个会将“所有的孩子”水平排列还是只有h1元素？ - undefined

Answer 2

考虑一下使用 float:left。

.parent h1 {
    float:left;
}

<div class="parent">
    <h1>Hello</h1>
    <h1>World</h1>
</div>

甚至可以使用display:inline

.parent h1{
  display:inline;
  }

<div class="parent">
  <h1>Hello</h1>
  <h1>World</h1>
</div>

请记住，在此处不建议使用float，因为如果您向.parent div添加新元素，则该元素将出现在h1元素旁边，因为这些元素正在向左浮动。感谢@MathiasaurusRex指出这一点。

- Rizky Fakkel

---

我会小心在这种情况下使用浮点数，因为如果您在父元素中放置任何其他标签，则这两个类将向左浮动。 http://jsfiddle.net/1tqb7yb6/ - Mathias Rechtzigel

是的，我记得显示也是一种可能性，而且是更好的一种。我编辑了我的帖子以使其更准确。谢谢。 - Rizky Fakkel

Answer 3

另一种方法如下所示：

.parent {
    display: flex;
    flex-direction: row;
}

<div class="parent">
    <h1>Hello</h1>
    <h1>World</h1>
</div>

- Dainank

---

这很好。在父元素上也可以指定子元素的边距吗？ - undefined

@Pawcio 这可能是你在寻找的东西：https://stackoverflow.com/questions/1762539/margin-on-child-element-moves-parent-element - undefined

Answer 4

您不需要对div进行对齐，但需要对h1进行对齐：

在您的CSS代码中添加以下内容：

h1 { display: inline; } 这里有一个Fiddle示例

- msm.oliveira

Answer 5

需要注意的是，你选择用h1标签来包含子元素是错误的。header标签会在标题之前和之后插入一个空行。如果你只是想显示一些文本，header标签不是正确的选择。

- Michael Gomes

---

标题标签通常默认具有较大的边距样式，但它们绝对不会插入空白行。 - Nathan Tuggy