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変更することで動作を変更できますdisplayinline-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 に答える