ラジオボタンを水平に整列する方法

Question

ラジオボタンの入力はラベルで行いますが、水平に並べることはできませんが、縦に1つずつ表示されます。ただ、ディスプレイと遊ぶ

<div class="cc-selector-2" align="right"> 
     {{range $index,$url := .Avatars}}            
     <label for="pic1">                 
     <input type="radio" name="avatar" id={{$url}} value={{$url}} />    
     <img src={{$url}} alt="" height="40" width="40"/>                         
     </label> 
     {{end}} 
</div> 

<style>  
.cc-selector-2 input{ 
    position:absolute; 
    z-index:999; 
} 

    label { 
     display: block; 
     text-align: center; 
     margin-bottom:0px; 
     font-size: .85em; 
     background-color:buttonface; 
    } 

</style> 

Answer 1

：インラインブロック;）

cc-selector-2{ 
 
    text-align: center; 
 
} 
 

 
label { 
 
    display: inline-block; 
 
    margin:auto; 
 
    font-size: .85em; 
 
    background-color:buttonface; 
 
} 
 

 
input { 
 
    margin: 0; 
 
}

<div class="cc-selector-2" align="right"> 
 
    <label for="pic1"> 
 
     <input type="radio" name="avatar" id={{$url}} value={{$url}} />   
 
     <img src={{$url}} alt="" height="40" width="40"/> 
 
    </label> 
 
    <label for="pic1"> 
 
     <input type="radio" name="avatar" id={{$url}} value={{$url}} />   
 
     <img src={{$url}} alt="" height="40" width="40"/> 
 
    </label> 
 
</div>