Html 表单字段的对齐_Html_Css_Forms_Alignment_Margin

Html 表单字段的对齐

html css forms

Html 表单字段的对齐,html,css,forms,alignment,margin,Html,Css,Forms,Alignment,Margin,我正在尝试创建一个表单，为我的网站创建一个新用户。我希望表单字段水平对齐，使其看起来更好。我尝试过使用一些简单的CSS来实现这一点，但我无法让它工作* <html> <form name="newUserForm" method="post" action="createUserScript.php"> <p>Username: <input name="username" type="text" autofo

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

整个东西位于一个具有以下属性的

中（我不知道这是否有什么要说的）

目前，它似乎是从文本结束的地方空白，但我不确定。我错过了什么

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

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


标签{显示：块；浮动：左；宽度：130px；}
.formFeild{宽度：200px；}
p{clear:两者；页边距底部：5px；}
用户名：
电邮：
密码：
重复密码：
管理员：

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


标签{显示：块；浮动：左；宽度：130px；}
.formFeild{宽度：200px；}
p{clear:两者；页边距底部：5px；}
用户名：
电邮：
密码：
重复密码：
管理员：

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

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

如果在表单外有一些名称/值对，也可以使用

执行此操作：

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


随便什么：一些东西。。。
还有：更多的东西。。。

将是表格，每个是一行，和元素是单元格。
您可以做的另一件事是使用表格对齐。这样，您就不必选择宽度：
<form>
  <p><label>Username:</label><input>
  <p><label>Password:</label><input>
  <p><label>Shoe size:</label><input>
  <p><label>Favorite color:</label><input>
</form>

如果在表单外有一些名称/值对，也可以使用
执行此操作：
<ul class=pairs>
  <li><label>Whatever:</label><p>Some stuff ...
  <li><label>Something Else:</label><p>More stuff ...
</ul>


随便什么：一些东西。。。
还有：更多的东西。。。


将是表，每个
是一行，而
和
元素就是单元格。您实际上需要阅读css和html的基础知识，以便更好地理解显示属性的不同值…您实际上需要阅读css和html的基础知识，以便更好地理解显示属性的不同值…I个人喜欢内联块显示而不是浮动块显示。有序列表在语义上也可能更好。但无论如何，这回答了这个问题，所以+1:-）这似乎是一个相当不错的解决方案。让我想知道为什么我自己没有想到这一点…这可能是一个问题，这是固定宽度的标签。但是，当谈到字段数量有限的1表单时，这不是一个大问题。我个人更喜欢内联块显示而不是浮动块显示。有序列表在语义上也可能更好。但无论如何，这回答了这个问题，所以+1:-）这似乎是一个相当不错的解决方案。让我想知道为什么我自己没有想到这一点…这可能是一个问题，这是固定宽度的标签。但是，在讨论1种形式的情况下，这不是一个大问题，在这种情况下，我们可以考虑HTML表语义正确吗？第1列是标签，第2列是css代码模拟的输入字段，这可以看作是表格排列。。。作为一个侧重点，希望不要看起来像一个语义纳粹，我认为有序列表一个更好的语义形式的形式，因为一些随机安排可能看起来非常怪异……巴特多德，这可能是一个论点的头发分裂人群。就我个人而言，我更喜欢更简单（非表）的标记，因为我认为它更干净，而且在语义上更合适（尽管我承认这对我来说并不特别重要）。。。旧浏览器对这种代码的支持如何？好的，非常感谢您的帮助。有选择总是好的：-）语义在大多数情况下是令人毛骨悚然的。。。也许这就是为什么我喜欢它：-在这种情况下，我们可以考虑HTML表语义正确吗？第1列是标签，第2列是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;
}

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