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

您必须使用这种方式：

应该<label>确保用户点击标签文字时，它会关注相应的输入。
<strong>代码有一个display: inline-block，可以轻松设置宽度。
您不需要这么多id s。
您需要为所有name字段提供<input />属性。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

＆＃13;

li {
  list-style-type: none;
}

li p {
  display: inline-block;
  width: 120px;
  text-align: left;
  font-family: "Times New Roman";
  font-style: oblique;
  font-size: 14px;
}

＆＃13;

<div id="container" align="center">
  <ul>
    <li>
      <p>Name:</p>
      <input type="text">
    </li>
    <li>
      <p>Nickname:</p>
      <input type="text">
    </li>
    <li>
      <p>Email Address:</p>
      <input type="text">
    </li>
    <li>
      <p>School:</p>
      <input type="text">
    </li>
  </ul>
</div>

＆＃13;

Codepen

Answer 3

稍加修改，复制此代码并进行检查。

jsonReader: { repeatitems: false, root: function (obj) { return obj; } }

如果您是css的新手，请使用此网站GitHub作为指导

Regds

标签后面的空格文本框

3 个答案: