HTML 水平对齐 DIV 子元素

Question

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

我的 HTML :

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

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

Hello
World

代替

Hello World

有什么想法吗？

Answer 1

您正在寻找的属性是 display: inline; 这将使每个标记呈现为“彼此内联”。

.parent h1 {
    display: inline;
}

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

Example JSfiddle