html - 标签后的空格文本框

Question

对于样式表，我将 name、email 向左浮动，将 nickname 和 school 向右浮动，但我希望他们文本框从同一点开始。我如何使用 CSS 实现这一目标？

<div id="container" align="center">
  <div id="name">Name:
    <input id="name_text" type="text">
  </div>
  <div id="nickname">Nickname:
    <input id="nickname_text" type="text">
  </div>
  <div id="email">Email Address:
    <input id="email_text" type="text">
  </div>
  <div id="school">School:
    <input id="school_text" type="text">
  </div>
</div>

Answer 1

你必须这样使用:

1. 应该有<label>确保当用户点击标签文本时，它会专注于相应的输入。
2. <strong>标签有一个 display: inline-block便于设置宽度。
3. 你不需要那么多id s.
4. 您需要提供 name属性到所有 <input />字段。

label strong {display: inline-block; width: 150px; text-align: left; margin: 0 0 10px;}

<div id="container" align="center">
  <div id="name">
    <label>
      <strong>Name:</strong>
      <input id="name_text" type="text" />
    </label>
  </div>
  <div id="nickname">
    <label>
      <strong>Nickname:</strong>
      <input id="nickname_text" type="text" />
    </label>
  </div>
  <div id="email">
    <label>
      <strong>Email Address:</strong>
      <input id="email_text" type="text" />
    </label>
  </div>
  <div id="school">
    <label>
      <strong>School:</strong>
      <input id="school_text" type="text" />
    </label>
  </div>
</div>