[英]Html Radio Buttons Not Selectable
有什么主意为什么我不能选择其中任何一个单选按钮? 通常,当它们没有name
属性时会发生这种情况,但我已经确认它们都具有:
<div id="surveys-list" class="inline col-xs-12"><div>
<div class="inline-wrapper">
<div id="question-title"><div>
<label class="control-label">What is your gender?</label>
</div>
</div>
<div id="inline-question">
<form class="form-horizontal">
<div data-fields="">
<div class="form-field-gender control-group form-field" data-field="">
<div class="controls" data-input="">
<label class="radio">
<input type="radio" name="field-input-gender" id="field-input-gender-0" value="qx1-1">
<i class="fa fa-male fa-fw"></i> Male
</label>
<label class="radio">
<input type="radio" name="field-input-gender" id="field-input-gender-1" value="qx1-2">
<i class="fa fa-female fa-fw"></i> Female
</label>
</div>
</div>
</div>
</form>
</div>
</div>
奇怪的是,当我仅将html添加到其他页面或jsfiddle时,从可选择的角度来看,它似乎工作良好。
javascript或CSS中的某些内容是否有可能阻止这些内容的选择?
在这个jsfiddle中,我复制了CSS和完整的html页面。 这些按钮看不到可选内容,因此可能是CSS中的某些内容?
你的
<div id="continue-button">
妨碍了单选按钮,请尝试使用
max-width: 300px;
margin: 0px auto 0;
display: block;
position: relative;
top: 50px; /* added this line :) */
但是请注意,这不是最佳做法。 甚至没有响应,请考虑按照Niek Nijland和Abhishek Pandey的建议添加clearfix
#continue-button
是重叠的收音机,
采用
#continue-button > div{
float:left
}
或使用.clearfix
上form-field-gender control-group form-field
,因为使用的是float
的.controls
,你需要清除浮动。
<div class="form-field-gender control-group form-field clearfix" data-field="">
您需要添加此CSS。 问题是具有float <的.controls不在clearfix块中
.form-field-gender::after {
clear: both;
content: "";
display: table;
}
您可以在CSS下方进行更改。
.inline-wrapper #continue-button {
max-width: 300px;
margin: 50px auto 0; //change this css line add 50px instead of 12px
display: block;
position: relative;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.