假设以下标记:
<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>
在多数浏览器中,如何使单选按钮标签变得如下所示(IE6,FF,Safari,Chrome:
解决方法
我相信这一切都是这样的.你没有提到它必须验证,但是,所以我使用内嵌块(-moz-inline-Box)显示.其中一个我最喜欢的.
在Safari 3,FireFox 3和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>