html - 如何放大表单元素周围的 'click-zone'？

Question

我希望扩大单选按钮周围的可点击区域。

这就是我所拥有的:

这就是我想要的:

我尝试了以下( jsFiddle here )，但是 width和height属性似乎不适用于 <label> ...

HTML:

<div style="white-space:nowrap;">
    <span class="radio_option">
        <input type="radio" id="one" name="click_item" value="1" />
        <label class="radio_label" for="one">First Item</label>
    </span>
    <span class="radio_option">
        <input type="radio" id="two" name="click_item" value="2" />
        <label class="radio_label" for="two">Second Item</label>
    </span>
</div>

CSS:

span.radio_option {
    border: 1px solid gray;
}
span.radio_option:hover {
    background: #E0E0E0;
}
label.radio_label {
   width: 100px;
    height: 30px;
}
label.radio_label:hover {
    cursor: pointer;
}

Answer 1

更新:向 span.radio_option 添加填充。添加 display:inline-block 并设置宽度。

span.radio_option {
    border: 1px solid gray;
    padding: 5px 10px;
    display:inline-block; 
    width:120px;
}

在这里摆弄:http://jsfiddle.net/2bLtD/15/