Question

我有一个小问题让我的文本与我的文本字段对齐因为某些原因当我将文本向左浮动而文本字段向右一切都变得疯狂所以我只是留下了文本浮点数文本字段中没有任何内容。任何人都可以看到我可能会出错的地方吗？

#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

您可以更好地使用浮动属性构建特定于行的UI。

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

我已将float: left应用于文本框列并清除了<p>元素边距，线条垂直空间可以更好地由线元素控制（必须是一个类，而不是一个ID ..你可以通过这种方式使用很多这个。）

希望它有另一种方式帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

向formInput id添加display flex可以解决问题，同时删除其他元素上的浮点数。您可能需要考虑减少表单内嵌套元素的数量，这样布局就不那么复杂了。

＆＃13;

#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%;
  
  text-align: right;
  padding-right: 30px;
  color: #555;
}

#tb {
  width: 40%;
}

#tb input[type=text] {
  width: 100%;
}

#cb {
  
  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;
}

#formInput{
  display: flex;
  align-items:center;
}

＆＃13;

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

＆＃13;

Answer 3

假设您希望文本位于文本框的左侧。

尝试设置包围输入和p标签的div以包含css display：inline-block 并删除浮动。

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

3 个答案: