Tôi làm cách nào để tạo các nhãn đa dòng, theo chiều dọc và chiều ngang cho nút radio trong Biểu mẫu HTML bằng CSS?

Question

Giả sử đánh dấu sau:

<fieldset> 
    <legend>Radio Buttons</legend> 
    <ol> 
     <li> 
      <input type="radio" id="x"> 
      <label for="x"><!-- Insert multi-line markup here --></label> 
     </li> 
     <li> 
      <input type="radio" id="x"> 
      <label for="x"><!-- Insert multi-line markup here --></label> 
     </li> 
    </ol> 
</fieldset> 

Làm thế nào để nhãn nút phong cách đài phát thanh để họ trông giống như sau trong hầu hết các trình duyệt (IE6 +, FF, Safari, Chrome:

Answer 1

Sử dụng đánh dấu và css sau tôi đã có thể sản xuất các nhãn đa dòng không quấn dưới nút radio:

<style type="text/css"> 
    fieldset input, label { 
     float: left; 
     display: block; 
    } 

    fieldset li { 
     clear: both; 
    } 
</style> 

<fieldset> 
    <ol> 
    <li> 
     <input type="radio" id="x" /> 
     <label for="x"> 
     stuff<br/> 
     stuff1 
     </label> 
    </li> 
    <li> 
     <input type="radio" id="x" /> 
     <label for="x"> 
     stuff<br/> 
     stuff1 
     </label> 
    </li> 
    </ol> 
</fieldset> 

tuy nhiên tôi đã không thể sử dụng:

fieldset label { 
    vertical-align: middle; 
} 

để trung tâm nhãn theo chiều dọc trên nút radio, ngay cả khi áp dụng chiều rộng (cả hai đề xuất trong câu trả lời của Dmitri Farkov. Mục đích chính của tôi là để ngăn chặn gói dưới nút radio, vì vậy giải pháp này sẽ ổn trong thời gian tới.

Answer 2

Make đầu vào và nhãn cả hai

float: left; 
display: block; 

Đặt chiều rộng cho nhãn và đầu vào.

---

áp dụng

clear: both; 
vertical-align: middle; 

cho tất cả các li của.

Answer 3

Tôi tin rằng điều này thực hiện tất cả. Bạn đã không đề cập rằng nó phải xác nhận, vì vậy tôi đã sử dụng màn hình khối nội tuyến (-moz-inline-box). Một trong những mục yêu thích của tôi, thực sự.

Here's a working copy

Tested trong Safari 3, FireFox 3 và IE7.

<style type="text/css"> 
ol{ 
    padding-left: 0; 
    margin-left:0; 
} 

ol>li { 
    list-style-type: none; 
    margin-bottom: .5em; 
} 

ol>li input[type=radio] { 
    display: -moz-inline-box; 
    display: inline-block; 
    vertical-align: middle; 
} 

ol>li label { 
    display: -moz-inline-box; 
    display: inline-block; 
    vertical-align: middle; 
} 
</style> 

Answer 4

Vì tôi đã hỏi cách xử lý nhãn dài thực sự ở trên và cuối cùng tôi đã tự giải quyết. Đây là giải pháp cho vấn đề của tôi. Có lẽ nó có thể giúp bạn?

<style type="text/css"> 
    #master_frame { 
     background: #BBB; 
     height: 300px; 
     width: 300px; 
    } 
    fieldset.radios { 
     border: none; 
    } 
    fieldset fields { 
     clear: both; 
    } 
    input { 
     float: left; 
     display: block; 
    } 
    label { 
     position: relative; 
     margin-left: 30px; 
     display: block; 
    } 
</style> 

<div id="master_frame"> 
    <fieldset class='radios'> 
    <div class='field'> 
     <input type="radio" id="a" /> 
     <label for="a">Short</label> 
    </div> 
    <div class='field'> 
     <input type="radio" id="b" /> 
     <label for="b"> 
     A really long and massive text that does not fit on one row! 
     </label> 
    </div> 
    </fieldset> 
</div>