Javascript 用于员工输入表单的CSS块

您好，我正在创建一个简单的表单来输入员工信息。员工具有以下特征：

• 名字
• 姓
• 年龄
• SSN
• 性别
• 比赛
• 等等

我想为大约20个属性显示标签和文本框（有些属性有下拉列表）。我不想使用表格，因为我已经读到使用

元素和CSS是更好的样式，所以我想借此机会学习。有些字段非常宽（Address1、Address2），而另一些字段非常窄（先生/女士）

现在，所有标签/输入对的设置如下：

<div class="data-container">

  <div class="data-row">
    <div class="data-label>
      <!-- label -->
    </div>
    <div class="data-input>
      <!-- textbox -->
    </div>
  </div>

  <!-- many more label/input pairs here -->

  <!-- Submit --> <!-- Cancel -->


</div>

---

但即使行上有块显示，它们也会继续环绕整个容器，因此我无法在一行上获得3个输入，在下一行上获得4个输入，然后再获得3个输入，依此类推。如何正确执行此操作？

尝试添加

溢出：隐藏

.data-row
{
  display: block;
  clear: both;
  overflow: hidden;
}

尝试添加
溢出：隐藏

.data-row
{
  display: block;
  clear: both;
  overflow: hidden;
}

为了简单起见，我建议使用嵌套在
表单
元素中的
ul
，并使用简单的html表单元素：

<form action="" method="post">
<ul>
  <li><label for="firstName">First Name:</label><input type="text" name="firstName" id="firstName" /></li>
  <li><label for="familyName">Family Name:</label><input type="text" name="familyName" id="familyName" /></li>
  <li><label for="age">Age:</label><input type="number" name="age" id="age" /></li>
  <li><label for="ssn">SSN:</label><input type="text" name="ssn" id="ssn" /></li>
  <li><label for="gender">First Name:</label><input type="radio" name="gender" value="male" />Male<input type="radio" name="gender" value="female" />Female</li>
  <li><label for="streetAddress"><input type="text" id="streetAddress" name="streetAddress" /></li>

</ul>
</form>

您可以在单独的水平可变宽度行上免费获得
数据行
。我意识到这是一种不同的html结构，但它似乎确实带来了好处，包括在一行上有多个
输入
元素（只要您不
在css中显示：阻止
它们）。
为了简单起见，我建议使用嵌套在
表单
元素中的
ul
，并使用简单的html表单元素：

<form action="" method="post">
<ul>
  <li><label for="firstName">First Name:</label><input type="text" name="firstName" id="firstName" /></li>
  <li><label for="familyName">Family Name:</label><input type="text" name="familyName" id="familyName" /></li>
  <li><label for="age">Age:</label><input type="number" name="age" id="age" /></li>
  <li><label for="ssn">SSN:</label><input type="text" name="ssn" id="ssn" /></li>
  <li><label for="gender">First Name:</label><input type="radio" name="gender" value="male" />Male<input type="radio" name="gender" value="female" />Female</li>
  <li><label for="streetAddress"><input type="text" id="streetAddress" name="streetAddress" /></li>

</ul>
</form>

您可以在单独的水平可变宽度行上免费获得
数据行
。我意识到这是一种不同的html结构，但它似乎确实带来了好处，包括在一行上有多个
输入
元素（只要你不
在css中显示：阻止
它们）。
我不确定我是否完全理解这个问题，但我认为您希望能够在容器div中显示左浮动的多元组div。要使其正常工作，您需要在代码中做两件事：1-在标记中缺少两个双引号，用于类名“data label”和“data input”。和2-在浮动css声明中添加“display:inline”。这应该能奏效

这里有一个链接：
我不确定我是否完全理解这个问题，但我认为您希望能够在容器div中显示左浮动的多元组div。要使其正常工作，您需要在代码中做两件事：1-在标记中缺少类名“数据标签”和“数据输入”的两个双引号。和2-在浮动css声明中添加“display:inline”。这应该能奏效

这里有一个链接：
谢谢，它成功了！顺便问一下，你知道为什么我设置输入{width:100px；}并选择{width:100px；}时，选择的值会小4px？比“input”的宽度更窄。。如果你喜欢html，你会习惯的。并不像看上去那么容易谢谢，成功了！顺便问一下，你知道为什么我设置输入{width:100px；}并选择{width:100px；}时，选择的值会小4px？比“input”的宽度更窄。。如果你喜欢html，你会习惯的。并不像看上去那么容易