如何在標簽下方水平對齊單選按鈕

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

首先，元素的ID為radioGroup而不是class

其次，輸入不是標簽的孩子 ，而是兄弟姐妹

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> 

這確保了單選按鈕將在其各自的標簽下直接水平居中。