html - 如何放大表单元素周围的“点击区域”？

Question

我正在寻找扩大我的单选按钮周围的可点击区域。

这就是我所拥有的：

这就是我要的：

我尝试了以下（此处为 jsFiddlewidth ） ，但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/

Answer 2

添加padding: 5px 10px;到span.radio_option达到预期的效果。根据您的需要更改值。

这是带有代码的jsFiddle 链接。

Answer 3

你必须添加

display: inline-block

和标签的宽度。

小提琴：http: //jsfiddle.net/2bLtD/17/

CSS：

label{
    display: inline-block;   
    width: 150px;
}