Question

我正在制作一个简单的（哈！）表。我想要修复的内容存在问题。

我希望输入字段的左边缘排成一行。复选框和按钮不是
我想垂直居中标签w.r.t.相关的文本输入控件。
我想避免最终提交按钮上的12em边距。

感谢。任何想法都赞赏。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

我的建议是首先使用表格（哈！）。

考虑使用：http://jsfiddle.net/qy911wrb/

<table><tr><td></td></tr></table>

已添加

并根据您的请求调整了一些CSS。请说明是否应该进行任何其他视觉调整。

Answer 2

这并不能完成你想要的一切，但这只是一个开始。我已在<input>元素之外取<label>个元素，允许<label> s通过添加display: inline-block获得固定宽度。我还为<label>提供了for属性，以便将它们与相应的<input>字段相关联。通过在提交按钮前面添加一个空<label>，可以获得正确的布局。

一般来说，尽可能少地使用float并使用类进行样式化而不是直接设置html元素样式是个好主意。我个人总是看Bootstrap（在这种情况下是forms styling），看看他们是如何做到的。

＆＃13;

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

＆＃13;

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

＆＃13;

表格形式控制HTML css

2 个答案: