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

＆＃13;

cc-selector-2{
  text-align: center;
}

label {
  display: inline-block;
  margin:auto;
  font-size: .85em;
  background-color:buttonface; 
}

input {
  margin: 0;
}

＆＃13;

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

＆＃13;

如何水平对齐单选按钮

1 个答案: