HTML 水平对齐 DIV 子项

Question

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

我的HTML：

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

我尝试像其他人建议的那样在.parent上使用inline-block ，但 output 仍然是：

Hello
World

反而

Hello World

有任何想法吗？

Answer 1

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

.parent h1 {
    display: inline;
}

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

示例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元素旁边，因为它们是左浮动的。 +1指向@MathiasaurusRex指出这一点。

Answer 3

另一种方法如下：

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

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

Answer 4

您不需要对齐div，但需要对齐h1：在CSS代码中添加：

h1 { display: inline; } h1 { display: inline; } 小提琴这里

Answer 5

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