Question

你好我正在创建一个登录表单。但是我的复选框和与之相关的术语文本没有正确定位。我添加了<br>标签但没有效果。我试过clearfix它也不起作用。fiddle preview。

enter image description here

这是我的HTML代码

  <div class="mainlog">
     <form>
        <label class="la" for="xname">Name</label><input name="xname" class="in" value="" type="text"><br>
        <label class="la" for="xemail">Email</label><input name="xemail" class="in" value="" type="text"><br>
        <label class="la" for="xpass">password</label><input name="xpass" class="in" value="" type="text"><br>
        <label class="la" for="xpasscon">confirm</label><input name="xpasscon" class="in" value="" type="text"><br>

        <input type="checkbox" name="term"/><label class="lb" for="term" >I have read and agree to the Terms of Use and the Privacy Policy</label><br>
        <input type="submit" value="Sign Up" />
    </form>     
  </div>

Answer 1

将div中的复选框和文本换行并向左浮动。 避免使用<center> HTML5不支持

.mainlog {
  width: 450px;
  height: 250px;
  border: 5px solid #DBDBDB;
  border-radius: 5px;
  padding: 20px;
}
.in {
  padding: 8px;
  border: 1px solid #DFDFDF;
  width: 250px;
  float: left;
  margin-bottom: 10px;
  border-radius: 5px;
}
.la {
  width: 120px;
  float: left;
  text-align: left;
  text-transform: uppercase;
  color: #6B6B6B;
  clear: both;
}
.lb {} .checkbox {
  float: left;
}
}

<center>
  <div class="mainlog">
    <form>
      <label class="la" for="xname">Name</label>
      <input name="xname" class="in" value="" type="text">
      <br>
      <label class="la" for="xemail">Email</label>
      <input name="xemail" class="in" value="" type="text">
      <br>
      <label class="la" for="xpass">password</label>
      <input name="xpass" class="in" value="" type="text">
      <br>
      <label class="la" for="xpasscon">confirm</label>
      <input name="xpasscon" class="in" value="" type="text">
      <br>

      <div class="checkbox">
        <input type="checkbox" name="term" />
        <label class="lb" for="term">I have read and agree to the Terms of Use and the Privacy Policy</label>
        <br />
      </div>
      <input type="submit" value="Sign Up" />
    </form>
  </div>
</center>

Answer 2

快速修复：使用包装复选框将标签分配到div中，使用类＆＃34; width＆＃34;。然后在CSS中添加＆＃34; .width＆＃34;款式：宽度：100％;明确：两个


.width{

    width:100%;
    clear:both;
}

Demo

Answer 3

我对您的代码进行了一些小改动，对我来说看起来不错。我不确定这是不是你想要的。

请检查小提琴here。

这些是我所做的改变。

HTML：

<div class="lb"> <!-- added class "lb" to <div> and removed it from <label> -->
   <input type="checkbox" name="term"  />
   <label for="term">I have read and agree to the Terms of Use and the Privacy Policy</label>
</div>

CSS：

.lb {
    float:left; /* Floats the element to left */
}

我希望这适合你。：）

P.S。我删除了<br>

中的所有<form>个标签

html表单复选框没有按预期定位

3 个答案: