Etiketin ortasındaki radyo düğmesi ekranı

Question

Bu html'nin, radyo simgesini etiketin solunda göstermesi gerekir, ancak bunun üstündedir.
Krom (sol resim), firefox 45.0.1 (sağ görüntü)

kod etiketi radyo aktif hale tıklayarak" etiketi tıklanabilir hale getirmek gerekiyor çünkü etikette girdi iç içe nedeni düğmesi de "

Tüm tarayıcılarda düzgün görüntülenmesini nasıl sağlayabilirim? Teşekkür

.radio-label { 
    float: left; 
} 

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

Answer 1

Bu deneyebilirsiniz: Böyle

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

ve stil ...

.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 özelliği eleman sadece sen tek bir satırda eleman istediğiniz anlamına gelir soldaki gelmek zorluyor anlamına gelmez. Bir elemanı

.radio-inline { 
    float: left; 
} 

Answer 3

Sadece deneyin hizalamak sola

.radio-inline { 
float: left; 
} 

Answer 4

aslında demek sol şamandıra kullanın Sana bir div ve sonra bir sola öğesi ve diğer hizaya hem paketi zorunda düşünüyorum Sağ yani radyo düğmesi sola ve sağa etiketle. dış div belirli bir genişlik vermek ve her öğenin% 50 vermek