如何使用CSS在HTML表单中为单选按钮进行多行,垂直和水平对齐的标签?

前端之家收集整理的这篇文章主要介绍了如何使用CSS在HTML表单中为单选按钮进行多行,垂直和水平对齐的标签?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
假设以下标记
<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)显示.其中一个我最喜欢的.

Here’s a working copy

在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>

猜你在找的CSS相关文章