如何对齐水平低于标签

Question

单选按钮，所以我用下面的HTML显示在JSP水平居中各自的标签下面4个单选按钮：

<s:form action="markUser" name="markUser" method="post" namespace="/secure/admin"> 
    <div id="radioGroup"> 

     <label for="markStudent">Mark User as Student</label> 
     <input type="radio" name="mark" id="markStudent" value="Student" /> 

     <label for="markAdmin">Mark User as Admin</label> 
     <input type="radio" name="mark" id="markAdmin" value="Admin" /> 

     <label for="markService">Mark User as Service</label> 
     <input type="radio" name="mark" id="markService" value="Service" /> 

     <label for="markNull">Mark User as Null</label> 
     <input type="radio" name="mark" id="markNull" value="Null" /> 

    </div> 
</s:form> 

和CSS：

.radioGroup label { 
    display: inline-block; 
    text-align: center; 
    margin: 0 0.2em; 
} 
.radioGroup label input[type="radio"] { 
    display: block; 
    margin: 0.5em auto; 
} 

但我不断收到像下面这样的错位按钮

我在这里可能会错过什么？

Answer 1

据我了解，你想这个

#radioGroup .wrap { 
 
    display: inline-block; 
 
} 
 
#radioGroup label { 
 
    display: block; 
 
    text-align: center; 
 
    margin: 0 0.2em; 
 
} 
 
#radioGroup input[type="radio"] { 
 
    display: block; 
 
    margin: 0.5em auto; 
 
}

<div id="radioGroup"> 
 
    <div class="wrap"> 
 
    <label for="markStudent">Mark User as Student</label> 
 
    <input type="radio" name="mark" id="markStudent" value="Student" /> 
 
    </div> 
 

 
    <div class="wrap"> 
 
    <label for="markAdmin">Mark User as Admin</label> 
 
    <input type="radio" name="mark" id="markAdmin" value="Admin" /> 
 
    </div> 
 
    <div class="wrap"> 
 
    <label for="markService">Mark User as Service</label> 
 
    <input type="radio" name="mark" id="markService" value="Service" /> 
 
    </div> 
 
    <div class="wrap"> 
 
    <label for="markNull">Mark User as Null</label> 
 
    <input type="radio" name="mark" id="markNull" value="Null" /> 
 
    </div> 
 
</div>

注：

这是在两条战线上不正确的：

.radioGroup label input[type="radio"] { 
    display: block; 
    margin: 0.5em auto; 
} 

首先，该元件具有radioGroup不是阶级

其次的ID，输入是不是孩子标签而是兄弟

Answer 2

您可以将单选按钮放在标签内并稍微改变CSS。

.radioGroup label { 
 
    display: inline-block; 
 
    margin: 0 0.2em; 
 
    text-align: center; 
 
} 
 
.radioGroup label input[type="radio"] { 
 
    margin: 0.5em auto; 
 
}

<div class="radioGroup"> 
 
     <label for="markStudent">Mark User as Student<br /> 
 
      <input type="radio" name="mark" id="markStudent" value="Student" /> 
 
     </label> 
 
     <label for="markAdmin">Mark User as Admin<br /> 
 
      <input type="radio" name="mark" id="markAdmin" value="Admin" /> 
 
     </label> 
 
     <label for="markService">Mark User as Service<br /> 
 
      <input type="radio" name="mark" id="markService" value="Service" /> 
 
     </label> 
 
     <label for="markNull">Mark User as Null<br /> 
 
      <input type="radio" name="mark" id="markNull" value="Null" /> 
 
     </label> 
 
    </div>

这确保了单选按钮将被水平地直接在其各个标签下居中。