ラベルの真ん中にラジオボタンが表示されます

Question

このhtmlはラベルの左側にラジオアイコンを表示する必要がありますが、ラベルの上に表示されています。ラベルをクリック
クロム（左画像）は、Firefox 45.0.1（右画像）

コードがラベルクリッカブルを行う必要があるので、私はラベルに入力を入れ子になった理由は、」ラジオを活性化させますボタンも同様です。

すべてのブラウザで正しく表示するにはどうすればよいですか？おかげ

.radio-label { 
    float: left; 
} 

<label class="radio-label"> 
     <input type="radio" name={{group}} checked={{value}} value={{name}}>{{caption}} 
    </label> 

Answer 1

あなたはこれを試すことができます。このような

<label class="radio-label"> 
    <input type="radio" name={{group}} checked={{value}} value={{name}}> 
    <div>{{caption}}</div> 
</label> 

とスタイリングを...

.radio-label { 
 
    width: 200px; // you can modify this as per your needs... 
 
} 
 
.radio-label, .radio-label input { 
 
    float: left; 
 
} 
 

 
.radio-label div { 
 
    overflow: hidden; 
 
}

Answer 2

display:inline-blockプロパティは、要素はそれだけであなたは、単一の行の要素が欲しい意味左側に来るように強制されていることを意味するものではありません。私はあなたがdiv要素の両方でパックした後、左に一つのアイテムを揃えると、上の他のためにあると思う

.radio-inline { 
float: left; 
} 

Answer 3

を揃える左に意味どの左フロートを使用してください右、つまりラジオボタンを左に、ラベルを右に移動します。 は、外側のdivに特定の幅を与え、各項目には50％を与える

Answer 4

、実際にはあなただけで試す要素

.radio-inline { 
    float: left; 
}