CSS表单样式在一行上有多个控件

Question

我想在一行上创建一个包含多个文本框/标签组合的CSS表单。我看到的大多数示例都显示每一行都有一个单独的表单字段。

例如，我想在一行上使用姓氏和名字的文本框，在第二行使用电话号码。

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：block而不是display：inline，则会添加换行符，但默认情况下不应该这样。

Answer 2

有很多方法可以做到这一点。乍得显示一个。这是另一个：

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; }