0

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

目前我有这种方式

<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 相同。我可以使用跨度，但我不知道如何正确定位它们，因为我希望文本字段正好位于最后一个下方。

任何人都可以帮我解决这个问题吗？

4

5 回答 5

1

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

.text {
    display: inline;
}

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

于 2013-03-27T17:21:54.517 回答
1

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

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

演示：小提琴

于 2013-03-27T17:22:26.413 回答
1

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

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

jsFiddle 示例

于 2013-03-27T17:23:44.190 回答
1

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

于 2013-03-27T17:24:06.260 回答
1

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

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

于 2013-03-27T17:24:19.553 回答