css - 1 行に複数のコントロールがある CSS フォームのスタイル設定

Question

1 行に複数のテキスト ボックス/ラベルの組み合わせを含む CSS フォームを作成したいと考えています。私が見るほとんどの例は、各行が個別のフォーム フィールドを取得することを示しています。

たとえば、姓と名のテキストボックスを 1 行に、電話番号を 2 行目に入力したいと思います。

Answer 1

これに関連して CSS を使用できますが、特に CSS の問題ではありません。これと同じくらい簡単なものが機能するはずです：

<label for="last_name">Last Name:</label> <input type="text" id="last_name" name="last_name" />
<label for="first_name">First Name:</label> <input type="text" id="first_name" name="first_name" />
<br />
<label for="phone">Phone Number:</label> <input type="text" id="phone" name="phone" />

私が言ったように、CSS は関連している可能性があります。たとえば、入力またはラベルが display:inline ではなく display:block として定義されている場合、改行が追加されますが、デフォルトでは発生しないはずです。

Answer 2

それを行う方法はたくさんあります。チャドは 1 つを示しています。ここに別のものがあります：

HTML:

<label id="LNameField" for="LName">Last Name 
   <input id="LName" type="text">
</label>
<label id="FNameField" for="FName">First Name 
   <input id="FName" type="text">
</label>
<label id="PhoneField" for="Phone">Phone Number 
   <input id="Phone" type="text">
</label>

CSS:

label
{
   display: block;
   float: left;
}

#PhoneField { clear: both; }