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

【问题标题】：How to enlarge the 'click-zone' around a form element?如何放大表单元素周围的“点击区域”？
【发布时间】：2013-06-17 16:17:21
【问题描述】：

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

这就是我所拥有的：

这就是我想要的：

我尝试了以下（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;
}

【问题讨论】：

标签： html css radio-button

【解决方案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/

【讨论】：

知道了！但是为什么width 和height 不能在<label> 上工作呢？我什至尝试添加display:block，但没有用..o_O
哦，你的方法有问题。这两个区域的宽度不同（我想要的）！此外，width 和 height 似乎也没有在 span.radio_option 上工作.. :(
显示：内联块；然后你可以定义一个宽度和高度。
仍然不完美。使用jsfiddle.net/2bLtD/15，在没有文本的框内单击无效。

【解决方案2】：

你必须添加

display: inline-block

标签的宽度。

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

CSS：

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

【讨论】：

谢谢！我稍微调整了你的代码，让它完全按照我想要的方式工作。这是决赛：jsfiddle.net/2bLtD/24

【解决方案3】：

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

这是带有代码的jsFiddle link。

【讨论】：