我正在寻找放大我的单选按钮周围的可点击区域。
这就是我所拥有的:
这就是我想要的:
我尝试了以下操作(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;
}
答案 0 :(得分:3)
已更新:为您的span.radio_option
添加填充。添加display:inline-block
并设置宽度。
span.radio_option {
border: 1px solid gray;
padding: 5px 10px;
display:inline-block;
width:120px;
}
答案 1 :(得分:1)
将padding: 5px 10px;
添加到span.radio_option
可达到预期的效果。根据需要更改值。
以下是带有代码的jsFiddle link。
答案 2 :(得分:1)
你必须添加
display: inline-block
和标签宽度。
小提琴:http://jsfiddle.net/2bLtD/17/
CSS:
label{
display: inline-block;
width: 150px;
}