Ngăn văn bản bị gói trong hộp kiểm

Question

Tôi đang đặt một nhóm hộp kiểm và tôi đang chạy qua vấn đề gói văn bản cũ bên dưới hộp kiểm nếu văn bản quá dài.

HTML của tôi:

<div class="right"> 
    <form id="updateProfile"> 
     <fieldset class="checkboxes"> 
      <p>4. What is your favorite type of vacation?</p> 
      <label><input type="checkbox" name="vacation" value="Ski Trips"> Ski Trips</label> 
      <label><input type="checkbox" name="vacation" value="Beach Visits"> Beach Visits</label> 
      <label><input type="checkbox" name="vacation" value="Cruises"> Cruises</label> 
      <label><input type="checkbox" name="vacation" value="Historical and educational trips"> Historical and educational trips</label> 
      <label><input type="checkbox" name="vacation" value="Yachting"> Yachting</label> 
      <label><input type="checkbox" name="vacation" value="Road Trip"> Road Trip</label> 
      <label><input type="checkbox" name="vacation" value="Spa Weekend"> Spa Weekend</label> 
      <label><input type="checkbox" name="vacation" value="Bed and Breakfast"> Bed and Breakfast</label> 
      <label><input type="checkbox" name="vacation" value="Stay home and relax"> Stay home and relax</label> 
      <label><input type="checkbox" name="vacation" value="Gambling Trips"> Gambling Trips</label> 
      <label><input type="checkbox" name="vacation" value="Volunteer"> Volunteer</label> 
     </fieldset> 
    </form> 
</div> 

CSS của tôi:

div.right{width:580px;} 

form#updateProfile fieldset label{ 
    display: block; 
    margin-bottom: 5px; 
    font-size: 16px; 
    float: left; 
    width: 33%; 
} 

Xem fiddle tôi ở đây: http://jsfiddle.net/fmpeyton/7WmGr/

Sau nhiều tìm kiếm trên các trang web khác nhau, tôi dường như không thể tìm thấy một lý dung dịch. Tôi đang mở cho các đề xuất về việc thay đổi đánh dấu/phong cách của tôi, nhưng tôi muốn giữ mã như sạch và ngữ nghĩa nhất có thể.

Cảm ơn!

Answer 1

Điều này dường như làm việc:

http://jsfiddle.net/7WmGr/5/

tôi đã cho label một margin-left của 18px và các hộp kiểm bên một margin-left của -18px.

HTML:

<div class="right"> 
    <form id="updateProfile"> 
     <fieldset class="checkboxes"> 
      <p>4. What is your favorite type of vacation?</p> 
      <label><input type="checkbox" name="vacation" value="Ski Trips"> Ski Trips</label> 
      <label><input type="checkbox" name="vacation" value="Beach Visits"> Beach Visits</label> 
      <label><input type="checkbox" name="vacation" value="Cruises"> Cruises</label> 
      <label><input type="checkbox" name="vacation" value="Historical and educational trips"> Historical and educational trips</label> 
      <label><input type="checkbox" name="vacation" value="Yachting"> Yachting</label> 
      <label><input type="checkbox" name="vacation" value="Road Trip"> Road Trip</label> 
      <label><input type="checkbox" name="vacation" value="Spa Weekend"> Spa Weekend</label> 
      <label><input type="checkbox" name="vacation" value="Bed and Breakfast"> Bed and Breakfast</label> 
      <label><input type="checkbox" name="vacation" value="Stay home and relax"> Stay home and relax</label> 
      <label><input type="checkbox" name="vacation" value="Gambling Trips"> Gambling Trips</label> 
      <label><input type="checkbox" name="vacation" value="Volunteer"> Volunteer</label> 
     </fieldset> 
    </form> 
</div> 

CSS:

div.right{width:598px;} 

form#updateProfile fieldset label{ 
    display: block; 
    margin-bottom: 5px; 
    font-size: 16px; 
    float: left; 
    width: 30%; 
    margin-left:18px; 
} 
form#updateProfile fieldset label input[type='checkbox']{margin-left:-18px;} 

Dường như làm việc trong Crome & IE9.

Answer 2

Một tùy chọn sẽ giống như thế này.

form#updateProfile fieldset label{ 
    display: block; 
    margin-bottom: 5px; 
    font-size: 16px; 
    float: left; 
    width: 30%; 
    padding-left: 3%; 
    position: relative; 
} 

input { 
    position: absolute; 
    left: -5px; 
} 

Demo đây: http://jsbin.com/opoqon/1/edit

Con đường tôi có xu hướng để làm điều đó là khác nhau, mà không gói inputs với labels, chứ không phải làm một cái gì đó giống như

<input id="ski-trips" type="checkbox" name="vacation" value="Ski Trips"><label for="ski-trips">Ski Trips</label> 

mà sau đó cho phép để tạo kiểu tóc dễ dàng hơn .

Dưới đây là một ví dụ về cách mà: http://jsbin.com/otezut/1/edit

Nhưng một trong hai cách sẽ làm việc.

Answer 3

Đây là một tùy chọn khác. Nó rất đơn giản nhưng hiệu quả. Bạn lấy phần đang gói. <label><input type="checkbox" name="vacation" value="Historical and educational trips"> Historical and educational <span class="antiWrap">trips</span></label> và bạn thêm một khoảng với một lớp. Tôi gọi lớp antiWrap. Sau đó, bạn sử dụng css để thêm một lề trái cho nó như thế nào. .antiWrap { margin-left: 18px; } Đây là myfiddle dựa trên mã của bạn. http://jsfiddle.net/alexhram/7WmGr/3/ Tôi nghĩ đó là những gì bạn đang làm? Cho tôi biết.

Answer 4

Tôi thích điều này ...

HTML:

<input type="checkbox" name="vacation" value="Ski Trips"><label>very long label ...</label> 

CSS:

input[type="checkbox"] { 
    position: absolute; 
} 
input[type="checkbox"] ~ label { 
    padding-left:1.4em; 
    display:inline-block; 
} 

Answer 5

Dưới đây là một trong đó là ít phụ thuộc vào kích thước của các yếu tố đầu vào.

div {width: 12em;} 
 

 
label { 
 
    display: block; 
 
    white-space: nowrap; 
 
    margin: 10px; 
 
} 
 

 
label input { 
 
    vertical-align: middle; 
 
} 
 

 
label span { 
 
    display: inline-block; 
 
    white-space: normal; 
 
    vertical-align: top; 
 
    position: relative; 
 
    top: 2px; 
 
}

<div> 
 

 
<label><input type="radio"><span>I won't wrap</span></label> 
 
<label><input type="checkbox"><span>I won't wrap</span></label> 
 

 
<label><input type="radio"><span>I am a long label which will wrap</span></label> 
 
<label><input type="checkbox"><span>I am a long label, I will wrap beside the input</span></label> 
 

 
</div>