HTML水平对齐DIV子项

Question

我是HTML和CSS开发的新手。我希望div div中的所有孩子都水平对齐

我的HTML：

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

我尝试在inline-block上使用.parent，就像其他建议一样，但输出仍然是：

Hello
World

代替

Hello World

任何想法？

Answer 1

您要查找的属性为display: inline;，这会使每个标记呈现为“互相内联”。

.parent h1 {
    display: inline;
}

你也可以浮动标签，但我会避免这样做，因为如果要在.parent容器中添加任何其他标签，它会破坏文本流。

Example JSfiddle

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 +1指出这一点。

Answer 3

你不需要对齐div，但需要对齐h1＆＃39; 在您的CSS代码中添加：

h1 { display: inline; } Fiddle here

Answer 4

这里要注意的一点是你选择的标签h1 for children是错误的，header在标题之前和之后插入一个空行。因为你的动机只是显示一些文本标题标签不是正确的标签选择。