CSS 表单样式，一行上有多个控件答案

【问题标题】：CSS Form styling with multiple controls on one lineCSS 表单样式，一行上有多个控件
【发布时间】：2009-02-18 22:04:30
【问题描述】：

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

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

【问题讨论】：

标签： css forms multiline

【解决方案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，则会添加换行符，但默认情况下不应发生。

【讨论】：

【解决方案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; }

【讨论】：