为什么我不能选择这些单选按钮中的任何一个?通常,当它们没有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
}
或form-field-gender control-group form-field
上使用.clearfix
,因为您在.controls
上使用float
,您需要清除浮点数。
<div class="form-field-gender control-group form-field clearfix" data-field="">
你需要添加这个css。问题是具有 float
.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;
}