如何固定单选按钮的宽度答案

【问题标题】：How to fix width of radio button如何固定单选按钮的宽度
【发布时间】：2013-07-28 13:19:52
【问题描述】：

我想用纯 CSS 设置单选按钮的样式。我几乎明白了，但我无法制作固定宽度的背景颜色。

这就是我正在实现的目标......

...这就是我想要实现的目标：

这是我的html

<form>

<a>
<input id="radio1" type="radio" name="mode" value="size" class="button"> 
<span><label for="radio1">Varones</label></span>
</a>

<a>     
<input id="radio2" type="radio" name="mode" value="count" checked> 
<span><label for="radio2">Mujeres</label></span>
</a>

<a>
<input id="radio3" type="radio" name="mode" value="count" checked>
<span><label for="radio3"> Ambos</label></span>
</a>

</form>

这是我的css

span {
    width: 100px;
}

a {

    font-family:Helvetica,Arial,sans-serif;
    font-size:14px;
    display: block;
    padding:7px;
    display:block;
}

label {
    width:150px;
}

input[type="radio"] {
    display:none;
}

input[type="radio"] + span {
    cursor: pointer;
    padding: 4px 10px;
    background: lightblue; /*fondo del boton inactivo*/
    color: black;
    border-radius: 3px;
}

input[type="radio"]:checked + span {
    padding-right:50px;
    color: red; /*color tipografia boton activo*/
    background: url('flechaRadio.png') right no-repeat;
    background-color:#E5E5E5;/* color fondo boton activo*/ 
    background-position: 70px;
}

input[type="radio"]:hover + label:hover {
    color: black; /*estilo para la tipo del over */
}

这是一个例子

http://jsfiddle.net/ploscri/P9yer/

提前谢谢你。

【问题讨论】：

标签： html css

【解决方案1】：

您需要将display:inline-block 添加到您的跨度并从选中的选项中删除填充：

span{
    display: inline-block;
    width: 80px;
}

Updated fiddle

【讨论】：

@Pablo 很高兴为您提供帮助。不要忘记通过单击左侧的绿色复选标记将此标记为您接受的答案
在em而不是px中指定宽度可能会更好，这样如果用户在浏览器中指定了自定义字体设置，标签文本就不会被截断。