Htmlラジオボタンを選択できません

Question

なぜこれらのラジオボタンを選択できないのですか？通常、これは、彼らがname属性を持っていないが、私は確認されてきたときに発生し、これらの両方の操作を行います。

は、私は別のページやjsfiddleにちょうどHTMLを追加するときに奇妙なこと

<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> 

、より正常に動作するようです選択可能な視点。

それはjavascriptやCSSで何かが選択可能であることから、これらを防止することができることは可能ですか？

私はCSSと完全なHTMLページにコピー this jsfiddleで

。ボタンは選択可能に見えないので、おそらくCSSの中に何かがありますか？あなたの

<div id="continue-button"> 

Answer 1

は、ラジオボタンの形であり、

max-width: 300px; 
margin: 0px auto 0; 
display: block; 
position: relative; 
top: 50px; /* added this line :) */ 

を使用してみてくださいしかし、これはベストプラクティスではありませんのでご注意下さい。あなたは.controlsにfloatを使用しているためであっても応答しない、Niek Nijlandとアビシェークパンディ

Answer 2

#continue-button重なっている電波によって示唆されているように、clearfixを追加

使用

#continue-button > div{ 
    float:left 
} 

を考えたりform-field-gender control-group form-fieldに.clearfixを使用してください、浮遊物を取り除く必要があります。

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

Answer 3

このCSSを追加する必要があります。問題は、フロート<を持っ.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; 
}