html表單複選框沒有像預期的那樣定位

你好我正在創建一個登錄表單，但是我的複選框和相關的術語文本沒有正確定位，我添加了<br>標籤但沒有效果.i試過clearfix它也不行。這裏是fiddle preview。html表單複選框沒有像預期的那樣定位

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>

來源

2015-06-17 Fast Snail

它應該看起來像什麼？ BTW'

'無效。 – j08691

@ j08691複選框應該在確認字段後定位在新行 –

@ j08691中心無效？什麼？ –

裹的複選框，並在文本一個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>

來源

2015-06-17 02:57:23

是的這個工程.i扭曲它在一個字段設置的內部，並得到正確的輸出。我想知道爲什麼會發生這種行爲 –

其他元素設置一個浮動規則，而這不是。 –

快速修復支持：wrapp複選框與它的標籤與類「寬度」的DIV。然後在CSS中添加「.width」樣式：width：100％;明確：兩個。


.width{ 

    width:100%; 
    clear:both; 
}

Demo

來源

2015-06-17 03:10:03 equi

-1

我沒有在你的代碼的微小變化，它看起來對我好。我不確定這是不是你要找的。

請檢查小提琴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.我已經刪除了<form>中的所有<br>標籤

來源

2015-06-17 03:16:34

html表單複選框沒有像預期的那樣定位

回答

相關問題