Html 单选按钮不可选答案

【问题标题】：Html Radio Buttons Not SelectableHtml 单选按钮不可选
【发布时间】：2017-03-20 21:44:13
【问题描述】：

任何想法为什么我不能选择这些单选按钮？通常，当它们没有 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 中的某些内容阻止了这些内容的选择？

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

【问题讨论】：

对我来说效果很好，尝试创建一个显示问题的 sn-p
“是否有可能是 javascript 或 css 中的某些内容阻止了这些内容的选择？” - 你也没有向我们展示。
对，没有给出 javascript 或 CSS 代码。最好在 jsfiddle 上设置一个示例或提供该站点的 URL 以显示问题。
好的。我把 css 和 html 搞定了。

标签： javascript jquery html css radio-button

【解决方案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

【讨论】：

此解决方案有效，但我认为这不是最佳做法。尝试将 clearfix 类添加到 .form-field-gender。以下是有关 clearfix 的一些信息：stackoverflow.com/questions/8554043/what-is-a-clearfix.
@TomHammond 这个答案对你有用，但这只是一个短期解决方案，因为你正在使用引导程序，最好使用 clearfix 类，check fiddle

【解决方案2】：

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

【讨论】：

【解决方案3】：

你需要添加这个 css。问题是具有 float

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

【讨论】：

【解决方案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;
}

【讨论】：