Question

我正在尝试创建一个表单来为我的网站创建一个新用户。我希望将表单字段水平对齐，以使其看起来更好。我试过用一些简单的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;
}

目前它似乎是从文本结束的边缘开始，但我不确定。我在这里缺少什么？

*我可能会找到一些疯狂的解决方法来使其工作，但我想不出任何看似合理的事情。

Answer 1

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

<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>元素就是细胞。

Answer 2

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

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

表单字段的对齐方式

2 个答案: