html - 问题是让文本与文本字段对齐？

Question

当我将文本向左浮动并且文本字段向右浮动时，我遇到了一个小问题，让我的文本与我的文本字段对齐，一切都变得疯狂，所以我只是让文本 float 离开，文本字段上没有任何内容。谁能看出我可能哪里出错了？

#form {
  border: 2px solid #e1dfe1;
  border-radius: 5px;
  background-color: #fff;
  width: 60%;
  margin-left: 20%;
  margin-top: 50px;
  font-family: Arial, Helvetica, sans-serif;
}

#formName {
  background-color: #f5f0f5;
  border-bottom: 2px solid #e1dfe1;
}

#formName p {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  color: #565f65;
  font-weight: bold;
}

#formInput {
  padding-top: 10px;
  padding-bottom: 10px;
}

#tbName {
  width: 40%;
  float: left;
  text-align: right;
  padding-right: 30px;
  color: #555;
}

#tb {
  width: 40%;
}

#tb input[type=text] {
  width: 100%;
}

#cb {
  float: left;
  padding-left: 40%;
  padding-right: 5px;
}

#cbName {
  color: #555;
}

#submitBtn {
  padding-left: 40%;
}

.btn {
  width: 100px;
  height: 30px;
  background-color: #2f8fcb;
  color: #fff;
  font-weight: bold;
  border: 2px solid #2f8fcb;
  border-radius: 3px;
}

<form action="Register.php" method="post">
  <div id="form">
    <div id="formName" }>
      <p>Register</p>
    </div>

    <div id="formInput">
      <div id="tbName">
        <p>Username</p>
      </div>
      <div id="tb">
        <input name="Username" type="text">
      </div>
    </div>
    <div id="formInput">
      <div id="tbName">
        <p>Email</p>
      </div>
      <div id="tb">
        <input name="Username" type="text">
      </div>
    </div>
    <div id="formInput">
      <div id="tbName">
        <p>Password</p>
      </div>
      <div id="tb">
        <input name="Username" type="text">
      </div>
    </div>
    <div id="formInput">
      <div id="tbName">
        <p>Confirm Password</p>
      </div>
      <div id="tb">
        <input name="Username" type="text">
      </div>
    </div>
    <div id="formInput">
      <div id="cb">
        <input name="checkTOS" type="checkbox">
      </div>
      <div id="cbName">
        <p>I Agree The
          <font color="#799dba">Terms Of Services</font>
        </p>
      </div>
    </div>
    <div id="formInput">
      <div id="submitBtn">
        <input name="submit" type="submit" class="btn" value="REGISTER">
      </div>
    </div>
  </div>
</form>

Answer 1

您可以考虑使用 float 属性更好地构建特定于行的 UI。

您必须注意 float 列必须需要 clear: both在完成样式时停止应用到元素的 float 效果。我已将其设置为 #formInput例如。

我申请了 float: left到文本框列并清除 <p>元素边距，行垂直空间可以更好地由行元素控制(必须是一个类，而不是 ID.. 你可以通过这种方式使用很多)。

希望它能以另一种方式提供帮助。

#form {
  border: 2px solid #e1dfe1;
  border-radius: 5px;
  background-color: #fff;
  width: 60%;
  margin-left: 20%;
  margin-top: 50px;
  font-family: Arial, Helvetica, sans-serif;
}

#formName {
  background-color: #f5f0f5;
  border-bottom: 2px solid #e1dfe1;
}

#formName p {
  padding-top: 10px; 
  padding-bottom: 10px;
  padding-left: 10px; 
  color: #565f65;
  font-weight: bold;
}

#formInput {
  padding-top: 10px;
  padding-bottom: 10px;
  clear: both; /* To clear the float influences to the next line */
}

#tbName {
  width: 40%;
  float: left;
  text-align: right;
  padding-right: 30px;
  color: #555;
}

#tbName p {
  margin: 0;
}

#tb {
  width: 40%;
  float: left /* to fit with the label column */
}

#tb input[type=text] {
  width: 100%;
}

#cb {
  float: left;
  padding-left: 40%;
  padding-right: 5px;
}

#cbName {
  color: #555;
}

#submitBtn {
  padding-left: 40%;
}

.btn {
  width: 100px;
  height: 30px;
  background-color: #2f8fcb;
  color: #fff;
  font-weight: bold;
  border: 2px solid #2f8fcb;
  border-radius: 3px;
}

<form action="Register.php" method="post">
  <div id="form">
    <div id="formName" }>
      <p>Register</p>
    </div>

    <div id="formInput">
      <div id="tbName">
        <p>Username</p>
      </div>
      <div id="tb">
        <input name="Username" type="text">
      </div>
    </div>
    <div id="formInput">
      <div id="tbName">
        <p>Email</p>
      </div>
      <div id="tb">
        <input name="Username" type="text">
      </div>
    </div>
    <div id="formInput">
      <div id="tbName">
        <p>Password</p>
      </div>
      <div id="tb">
        <input name="Username" type="text">
      </div>
    </div>
    <div id="formInput">
      <div id="tbName">
        <p>Confirm Password</p>
      </div>
      <div id="tb">
        <input name="Username" type="text">
      </div>
    </div>
    <div id="formInput">
      <div id="cb">
        <input name="checkTOS" type="checkbox">
      </div>
      <div id="cbName">
        <p>I Agree The
          <font color="#799dba">Terms Of Services</font>
        </p>
      </div>
    </div>
    <div id="formInput">
      <div id="submitBtn">
        <input name="submit" type="submit" class="btn" value="REGISTER">
      </div>
    </div>
  </div>
</form>