html - 文本后的文本字段(在 div 中)始终显示在新行中

Question

我希望一些文本和文本字段正确显示在同一行中，并在每个文本字段后换行。首先，我将所有按钮放在一个具有绝对位置的类中，但我认为有更好的解决方案。

目前我是这样的

<form action="" method="get" name="pdaten" >
<p><div class="text">Vorname</div><input class="button" id="vname"  type="text" /></p>
<p><div class="text">Nachname</div><input class="button"  id="nname"  type="text" /></p>
<p><div class="text">Geburtstag</div><input class="button" id="gebdat" type="text" /></p>
</form> 

CSS:

form{
    padding-left:1em;

}

.button{
    position:relative;
    left:0%;
}

.text{
    position:relative;
    text-align:left;
    width:20%;
    background-color:#00FF00;
}

问题是，文本字段总是显示在下一行，而不是与文本所在的 div 相同。我可以使用跨度，但我不知道如何正确定位它们，因为我希望文本字段正好位于最后一个下方。

谁能帮我解决这个问题？

Answer 1

将 display:inline-block; 添加到您的文本类。

.text{
    position:relative;
    text-align:left;
    width:20%;
    background-color:#00FF00;
    display:inline-block;
}

jsFiddle example