Nhãn hộp kiểm căn chỉnh (web)

Question

Một hình ảnh cho biết có hơn một nghìn từ?

Tôi muốn các dòng thứ hai (và liên tiếp) được liên kết với các đầu tiên. Bất kỳ ý tưởng?

Html là

<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

Tôi chạy vào những điều tương tự và giải quyết nó theo cách này. Vấn đề lớn là các mục danh sách hộp kiểm có văn bản chiếm nhiều dòng.

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

Đối với một cuộc thảo luận chi tiết hơn xem bài của tôi ở đây: Aligning a List of Checkboxes with Text that Wraps