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時，從可選擇的角度來看，它似乎工作良好。

javascript或CSS中的某些內容是否有可能阻止這些內容的選擇？

在這個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

Answer 2

#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="">

Answer 3

您需要添加此CSS。 問題是具有float <的.controls不在clearfix塊中

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

Answer 4

您可以在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;
}