html - 如何固定单选按钮的宽度

Question

我想用纯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/

先感谢您。

Answer 1

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

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

更新的小提琴