라디오 버튼을 수평으로 정렬하는 방법

Question

레이블이있는 라디오 버튼 입력이 있지만 가로로 정렬 할 수는 없지만 세로로 하나씩 표시됩니다. 어떻게 하나씩 가로로 정렬 할 수 있습니까?

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