javascript - Html 单选按钮不可选

Question

有什么想法为什么我无法选择这些单选按钮吗？通常，当它们没有 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 时，从可选择的 Angular 来看，它似乎工作得很好。

是否有可能 JavaScript 或 CSS 中的某些内容阻止这些内容被选择？

在 this jsfiddle我复制了 CSS 和完整的 html 页面。这些按钮看不到可选择，所以可能是 CSS 中的某些内容？

Answer 1

你的

<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