如何水平對齊單選按鈕

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

只需使用display：inline-block;）

 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>