對齊複選框標籤（網頁）

Question

圖片說超過一千字？

我想第二（和連續的）線，以與所述第一對準。有任何想法嗎？

HTML是

<input><span>text</span> 

Answer 1

.thing input { float: left; } 
.thing label { display: block; margin-left: 2em; } 

<div class="thing"> 
    <input type="radio" id="potato"/> 
    <label for="potato">Text over multiple lines should be aligned properly...</label> 
</div> 

Answer 2

我遇到了同樣的事情，解決了這種方式。最大的問題是複選框列表項的文本佔用多行。

HTML

<div class="checkboxlist"> 
    <ul> 
     <li> 
      <asp:CheckBox ID="CheckBox1" runat="server" Text="This is a checkbox option in an unordered list that is pretty long and ends u wrapping onto another line, but maintains alignment" /> 
     </li> 
     <li> 
      <asp:CheckBox ID="CheckBox2" runat="server" Text="This is yet another checkbox option in an unordered list that is pretty long and ends u wrapping onto another line, but maintains alignment" /> 
      <div> 
       <br /> Here's some other info as well that isn't a part of the checkbox. The alignment for this works as well. 
      </div> 
     </li> 
    </ul> 
</div> 

CSS

div.checkboxlist ul li { margin: 7px 0px; } 
div.checkboxlist ul li input { width: 15px; display: block; float:left;} 
div.checkboxlist ul li label { padding-left: 28px; display: block; } 
div.checkboxlist ul li div { margin-left: 28px; clear: both; font-size: .9em; } 

對於更詳細的討論，請參閱我的文章在這裏： Aligning a List of Checkboxes with Text that Wraps