使用每个html上方的标签显示彼此相邻的两个输入

Question

我想做这样的事情

USER         EMAIL
input        input

但我无法想象如何以这种方式显示它.基本上我希望每组标签+输入字段都是div,但我希望div是并排的.也许我正在使用错误的标签,因为我是一个html noobie> <

Answer 1

div是一个块级元素,这意味着默认情况下它会占用整个水平空间,为了将它们并排排列,你需要float使用其它它们你需要使用它们display: inline-block

演示

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;
}