Javascript Html单选按钮不可选择

你知道为什么我不能选择这两个单选按钮吗？通常，当它们没有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添加到不同的页面或JSFIDLE时，从可选择的角度来看，它似乎工作得很好

javascript或css中的某些内容可能会阻止这些选项的选择吗

在中，我复制了CSS和整个html页面。按钮看不到可选择，因此可能是CSS中的某些内容？

您的

<div id="continue-button">

但请注意，这不是最佳做法。不响应，请考虑添加NIEK NIJLAND和Abhishek Pandey

< P>继续按钮是重叠无线电，

使用

或者在表单字段上使用.clearfix性别控制组表单字段，因为您在.controls上使用float，所以需要清除float

<div class="form-field-gender control-group form-field clearfix" data-field="">

---

你需要添加这个css。问题是，具有float<的控件不在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;
}

---

对我来说效果很好，试着创建一个代码片段来说明问题，javascript或css中的某些内容可能会阻止这些选项的选择吗您也没有向我们展示。对，没有给出javascript或CSS代码。最好在JSFIDLE上设置一个示例，或者提供一个指向该站点的URL来显示问题。我把css和html弄得乱七八糟。这个解决方案可行，但我认为这不是最好的做法。尝试将clearfix类添加到.form字段。这里有一些关于clearfix的信息：。@TomHammond这个答案对你有用，但这只是一个短期的解决方案，因为你正在使用引导，使用clearfix类很好，

.form-field-gender::after {
    clear: both;
    content: "";
    display: table;
}

.inline-wrapper #continue-button {
    max-width: 300px;
    margin: 50px auto 0; //change this css line add 50px instead of 12px
    display: block;
    position: relative;
}