html - 显示两个彼此相邻的输入，每个 html 上方都有标签

Question

我想做这样的事情

USER         EMAIL
input        input

但我不知道如何让它以这种方式显示。基本上我希望每组标签 + 输入字段都是一个 div，但我希望 div 并排。也许我使用了错误的标签，因为我是 html 菜鸟 ><

Answer 1

div 是一个 block 级元素，这意味着默认情况下它将占据整个水平空间，为了并排对齐它们，您需要将它们 float 否则您需要使用display: inline-block

Demo

HTML

<div>
    <label>Hello</label>
    <input type="text" />
</div>
<div>
    <label>Hello</label>
    <input type="text" />
</div>

CSS

div {
    display: inline-block;
}

div label {
    display: block;
}