html - 表格形式控件 HTML css

Question

我正在制作一个简单的(哈哈!)表格。我想要修复的内容存在问题。

1. 我希望输入字段的左边缘对齐。复选框和按钮没有。
2. 我想将标签中的文本垂直居中 w.r.t.关联的文本输入控件。
3. 我想避免在最终提交按钮上使用 12em 的边距。

谢谢。任何想法表示赞赏。

    p {
      text-align: center;
    }
    p label {
      float: left;
      clear: left;
      width: 20em;
      text-align: right;
      margin: .25em 1em 0em 0em;
      padding: .25em;
    }
    p label input {
      float: right;
      clear: right;
      padding: .25em;
    }
    #submit {
      clear: both;
      float: left;
      margin: 1em 0em 0em 12em;
      clear: left;
      width: 6em;
      text-align: center;
      background: yellow;
    }
    p > input {
      text-align: center;
    }
    span {
      padding: 0em 1em 0em 0em;
    }

<form>
  <div>
    <p>
      <label><span>Name:</span>
        <input id="name" type="text" placeholder="Name" autofocus required>
      </label>
    </p>
    <p>
      <label><span>Password:</span>
        <input id="password" type="password" placeholder="Password" required>
      </label>
    </p>
    <p>
      <label><span>Are you a photographer?:</span>
        <input id="photog" type="checkbox">
      </label>
    </p>
    <p>
      <input type="submit" id="submit" value="Register">
    </p>
  </div>
</form>

Answer 1

这并不能满足您的所有需求，但这是一个开始。我拍了<input> <label> 之外的元素允许 <label> 的元素s 通过添加 display: inline-block 来获得固定宽度.我还给了 <label>一个for属性使它们链接到相应的 <input> field 。通过添加一个空的 <label>在提交按钮前，它获得了正确的布局。

一般来说，使用 float 是个好主意尽可能少地使用类来设置样式，而不是直接设置 html 元素的样式。我个人总是看Bootstrap (在本例中为 forms styling )看看他们是怎么做到的。

label {
  width: 11em;
  display: inline-block;
  text-align: right;
  margin-right: .25em;
  padding: .25em;
}
input {
  padding: .25em;
}
#submit {
  margin: 1em 0em;
  text-align: center;
  background: yellow;
}

<form>
  <div>
    <p>
      <label for="name">Name:</label>
      <input id="name" type="text" placeholder="Name" autofocus required>
    </p>
    <p>
      <label for="password">Password:</label>
      <input id="password" type="password" placeholder="Password" required>
    </p>
    <p>
      <label for="photog">Are you a photographer?:</label>
      <input id="photog" type="checkbox">
    </p>
    <p>
      <label></label>
      <input type="submit" id="submit" value="Register">
    </p>
  </div>
</form>