Question

我有以下HTML：

<input type="radio" checked="" class="regular-radio" name="radio-1-set" id="radio-1-set" /><label for="radio-1-set"></label> Driving
<br />
<input type="radio" class="regular-radio" name="radio-1-set" id="radio-2-set" /><label for="radio-2-set"></label> Public Transit
<br />
<input type="radio" class="regular-radio" name="radio-1-set" id="radio-3-set" /><label for="radio-3-set"></label> Walking

CSS：

     label {
    display: inline;
}
.radio-1 {
    width: 193px;
}
.button-holder {
    float: left;
    margin-left: 6px;
    margin-top: 16px;
}
.regular-radio {
    display: none;
}
.regular-radio + label {
    background-color: #fafafa;
    border: 2px solid #cacece;
    border-radius: 50px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 -15px 10px -12px rgba(0, 0, 0, 0.05) inset;
    display: inline-block;
    padding: 11px;
    position: relative;

}
.regular-radio + label:before {
    background: none repeat scroll 0 0 #FDFDFD;
    border-radius: 50px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset;
    content: " ";
    font-size: 36px;
    height: 8px;
    left: 7px;
    position: absolute;
    top: 7px;
    width: 8px;
}
.regular-radio:checked + label:after {
    background: none repeat scroll 0 0 #94E325;
    border-radius: 50px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset;
    content: " ";
    font-size: 36px;
    height: 8px;
    left: 7px;
    position: absolute;
    top: 7px;
    width: 8px;
}
.regular-radio:checked + label {
    background-color: #e9ecee;
    border: 2px solid #adb8c0;
    color: #99a1a7;
    padding: 11px;
}
.regular-radio + label:active, .regular-radio:checked + label:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1) inset;
}

显示：http://jsfiddle.net/71vn4uhk/

如何修改CSS，以便文本在每个单选按钮旁边垂直排列，并在文本左侧添加一点填充。

Answer 1

试试这个，其中一个方法。设置lable的父元素的这个样式属性。

body {
        vertical-align: top;
        line-height: 26px;
    }

JSFIDDle

Answer 2

首先，您需要将标签文本放在标签标签中。

然后，您可以为单选按钮添加必要的填充和样式。

http://jsfiddle.net/ca8yzm56/

.regular-radio + label {padding-left: 25px;}
.regular-radio + label:before {top: 16px;}
.regular-radio:checked + label {padding-left: 25px;}
.regular-radio:checked + label:after {top: 16px;}

如何垂直居中单选按钮旁边的文本

2 个答案: