對齊複選框，就好像它們是一個線

現在，我想補充一個複選框，可以讓用戶將文本接受網站的條款。我想這個複選框和文本上的「發送按鈕」的左側，所以這裏是我曾嘗試：

<form action="#" method="post" id="form" class="accept_form" style="display: block; "> 
    <fieldset> 
     <div class="mail_from"> 
      <label for="from">Name</label> 
      <input class="mail" type="text" name="from" id="from"> 
     </div> 
     <div class="mail_to"> 
      <label>Last name</label> 
      <input class="mail" type="text" > 
     </div> 
     <div class="message"> 
      <label>Comment</label> 
      <textarea>I love this page, so I sign up</textarea> 
     </div> 
     <div class = "terms_button"> 
     <input type = "checkbox" name = "agree"> 
     <label for = "agree"> Accept the terms </label> 
     <button type="submit">Send</button> 
     </div> 
    </fieldset> 
</form>

所以，基本上我創建了一個新的div和裏面我試着對齊這些元素。但是，您可以看到複選框和文本比發送按鈕更高。我該如何解決這個問題？

演示是在這裏：Not aligned checkbox with Send button

來源

2012-11-03 Hommer Smith

的vertical-align CSS屬性是什麼你可能尋找，看到CSS2 specification at W3.org在深入討論。恐怕開始的問題是，標籤的文本大小不是100％（複選框元素），也可能是按鈕元素中的邊框，填充和字體大小 - 您可能需要稍微調整一下（特別是如果你想讓它在縮放時進行合理的縮放）。

來源

2012-11-03 21:22:07 peterph

只提示：我看看你的網站，我概述你的代碼，我看到提交按鈕有浮動權，我相信添加一個新的li項目和設置項目浮動右它可以把項目在由於您在Commit按鈕後面添加項目，因此Commit按鈕的左側。希望這可以幫助你......

來源

2012-11-03 21:23:29

從這個選擇刪除float: right：

form .terms_button button { 
    float:right; 
}

工作示例（唯一的變化是去掉float: right;） http://jsfiddle.net/ag44K/22/

來源

2012-11-04 00:36:25 Hank

對齊複選框，就好像它們是一個線

回答

相關問題