表单域的对齐方式答案

【问题标题】：Alignment of form fields表单域的对齐方式
【发布时间】：2014-12-21 07:02:17
【问题描述】：

我正在尝试创建一个表单来为我的网站创建一个新用户。我想让表单域水平对齐，让它看起来更好。我曾尝试使用一些简单的 CSS 来做到这一点，但我无法让它工作*。

<html>
    <form name="newUserForm" method="post" action="createUserScript.php">
        <p>Username:           <input name="username" type="text" autofocus class="formField"> </p>  
        <p>E-mail:             <input name="email" type="text" class="formField">              </p>
        <p>Password:           <input name="password" type="text" class="formField">           </p>
        <p>Repeat password:    <input name="passwordRepeat" type="text" class="formField">     </p>
        <p>Administrator:      <input type="checkbox" name="isAdmin" class="formField">        </p>
    </form>
</html>

.formField 类的 CSS 是

.formField {
    margin-left: 150px;
    width: 200px;
}

整个东西位于一个<div>，具有以下属性（我不知道这是否有什么要说的）

#content {
    padding: 10px;
    margin-left: 250px;
    font-family: arial;
}

目前它似乎是从文本结束的地方开始，但我不确定。我在这里错过了什么？

*我可能会找到一些疯狂的解决方法来让它发挥作用，但我想不出任何看起来合理的方法。

【问题讨论】：

您实际上需要阅读 css 和 html 的基础知识，以更好地了解 display 属性的不同值...

标签： html css forms alignment margin

【解决方案1】：

这就是我要做的（使用标签）：

<html>
    <style type="text/css">
        label{display:block; float:left; width:130px;}
        .formFeild{width:200px;}
        p{clear:both; margin-bottom:5px;}
    </style>

    <form name="newUserForm" method="post" action="createUserScript.php">
        <p><label>Username:</label><input name="username" type="text" autofocus class="formField"> </p>  
        <p><label>E-mail:</label><input name="email" type="text" class="formField">              </p>
        <p><label>Password:</label><input name="password" type="text" class="formField">           </p>
        <p><label>Repeat password:</label><input name="passwordRepeat" type="text" class="formField">     </p>
        <p><label>Administrator:</label><input type="checkbox" name="isAdmin" class="formField">        </p>
    </form>
</html>

【讨论】：

我个人更喜欢内联块显示而不是浮动显示。有序列表在语义上也可能更好。但这无论如何都回答了这个问题，所以+1 :-)
这似乎是一个相当不错的解决方案。让我想知道为什么我自己没有想到这一点......
一个可能的问题是标签的固定宽度。但这不是一个大问题，当谈论 1 个字段数量有限的表单时

【解决方案2】：

您可以做的另一件事是使用表格对齐。这样您就不必选择宽度：

<form>
  <p><label>Username:</label><input>
  <p><label>Password:</label><input>
  <p><label>Shoe size:</label><input>
  <p><label>Favorite color:</label><input>
</form>

CSS：

form {
  display: table;
}

form > p {
  display: table-row;
}

form > p > label, form > p > input {
  display: table-cell;
}

label {
  font-weight: bold;
  font-family: sans-serif;
  text-align: right;
  padding: 0 5px 0 5px;
}

Here's a CodePen. 如果您在表单之外有一些名称/值对，您也可以使用 <ul> 执行此操作：

<ul class=pairs>
  <li><label>Whatever:</label><p>Some stuff ...
  <li><label>Something Else:</label><p>More stuff ...
</ul>

<ul> 是表格，每个 <li> 是一行，<label> 和 <p> 元素是单元格。

【讨论】：

在这种情况下，我们可以认为 html 表在语义上是正确的吗？第 1 列用于标签，第 2 列用于输入字段，由您的 css 代码模拟，这可以被认为是表格排列......作为旁注并希望看起来不像语义纳粹，我认为有序列表是更好的语义表单的方法，因为一些随机排列可能看起来很奇怪......
@Bartdude 好吧，这可能是头发分裂人群的一个论点。就我个人而言，我更喜欢更简单（非表格）的标记，因为我认为它更简洁，并且更接近语义上的合适（尽管我承认这对我来说不是超级重要）。
天哪，现在它变得越来越花哨了...在旧浏览器中对这种代码的支持如何？
好的，非常感谢您的帮助。有选择总是好的:-)
语义在大多数情况下令人毛骨悚然...也许这就是我喜欢它的原因:-)