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

您可以将div s display属性设置为inline，如下所示：

.text {
    display: inline;
}

这将使div的行为类似于内联元素。

Answer 2

因为div是块元素，您可以通过将display属性值更改为inline-display

来更改行为

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

演示：Fiddle

Answer 3

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

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

<强> jsFiddle example

Answer 4

将float:left; clear:right;添加到.button元素

Answer 5

为什么不为你的div添加display: inline-block

演示：http://jsfiddle.net/mAsxZ/1/

文本之后的文本字段（在div中）始终以新行显示

5 个答案: