4

ここにいくつかのサンプルコードがあります

<label for="input1">input1</label>
<input id="input1" name="input1" type="text" required>
<label for="input2">input2</label>
<input id="input2" name="input2" type="date">

現在、次のように表示されます。

Label Label Input Input

私はそれをしたい：

Label Input Label Input

何か案は？さらにコードを提供する必要がありますか?

CSS

label { cursor: pointer; width: 250px; display: block; float: left; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
4

3 に答える 3

5

したがって、更新された質問を使用すると、解決するのは非常に簡単です。要素で使用するfloatと、インライン要素の通常の配置から外されます。これは、左側にあるラベルの優先度が高いことを意味します。ラベル、ラベル、入力、入力という出力が得られるのはそのためです。float入力フィールドにも追加すると、元の順序が復元されます。inlineまたは、 - または -要素のみを使用inline-blockする場合、フローティング要素を必要とせずに多くを構築できます。したがって、あなたの場合、これを単純に変更することもできます：

label {
    […]
    display: block;
    float:   left;
}

これに：

label {
    […]
    display: inline-block;
}
于 2012-08-10T15:36:33.690 に答える
0

よし、cssを追加しているときに、何かを試すことにしました。

input[type="text"], input[type="date"]{ float: left; }

問題は解決したようですが、原因がわかりません。誰かが説明できれば、それは素晴らしいことです。

于 2012-08-10T15:16:54.237 に答える
-1 
<table>
<tr>
<td><label for="input1">input1</label></td>
<td><input id="input1" name="input1" type="text" required></td>
<td><label for="input2">input2</label></td>
<td><input id="input2" name="input2" type="date"></td>
</tr>
</table>
于 2012-08-08T17:56:01.897 に答える