单选按钮标签组合在单独的行上垂直左对齐，只有 CSS
Left-align radio button label combo vertically on separate lines with only CSS
问题
我有一组垂直排列、堆叠的单选按钮。它们通过使用
标记在不同的行上。我想使用 CSS 将它们垂直对齐，左对齐，距左侧 100 像素。看起来并不那么难，但我还没有弄清楚。这是我为阐明所需结果而制作的插图：
默认对齐方式：
+----------------------------------------------------------------+
| |
| |
| |
| |
| * choice 1 |
| * choice 2 is a different length |
| * choice 3 is also long |
| |
| |
| |
| |
| |
+----------------------------------------------------------------+
所需的左对齐单选按钮，标签在右侧：
+----------------------------------------------------------------+
| |
| |
| |
| |
| * choice 1 |
| * choice 2 is a different length |
| * choice 3 is also long |
| |
| |
| |
| |
| |
+----------------------------------------------------------------+
制作
代码
这是我的代码：
CSS & HTML
form {
background-color: #ffffb3;
font-family: Arial, sans-serif;
padding: 10px;
border: 2px solid #000000;
min-width: 600px;
max-width: 690px;
width: 80%;
margin: 0 auto;
min-height: 200px;
}
label {
margin-left: 100px;
postion: absolute;
}
/*input[type="checkbox"]:checked + */
<form method="POST" action="mailto:eric.hepperle@pcc.edu">
<h2>Visitor Survey</h2>
<fieldset>
<label for="myName">Your Name:</label>
<input type="text" name="myName" id="myName">
<br>
<label for="email">Email Address:</label>
<input type="text" name="email" id="email">
<br>
</fieldset>
<p>What is your favorite movie?</p>
<input type="radio" name="movie" id="transformers" value="Transformers!">
<label for="transformers">Transformers!</label>
<br>
<input type="radio" name="movie" id="dark-knight" value="Dark Knight">
<label for="dark-knight">Dark Knight</label>
<br>
<input type="radio" name="movie" id="goodwillhunting" value="Good Will Hunting">
<label for="goodwillhunting">Good Will Hunting</label>
<br>
<br>
<input type="submit" value="Submit Query">
<input type="reset" value="Reset">
</form>
我已经尝试过的
- 搜索了网络和 Stack Overflow，但结果并不完全适用。
- 我试过将按钮和标签都向左浮动，左边距：100 像素，绝对位置，但它不起作用。
- 我试过弄乱
input[type="radio"] + label（但我需要标签在第一位），但无济于事。
- 在字段集中包装单选按钮和标签。
我的问题
所以，我有几个问题：
- 如何在不使用 div 或字段集的情况下使用 CSS 优雅地做到这一点？或者，换句话说，这可以用简单的 CSS 和标签和 input[type="radio"] 选择器来完成吗？
- 我知道字段集是为了可访问性，但我想知道使用字段集是最佳实践，还是它们是一种越来越过时的技术？
- 我可以在不使用
标签的情况下将收音机及其标签垂直对齐吗？
首先，您应该用 divs 包装表单组。
我知道你说过不要使用它们，但这是最优雅、最简单的方法。走任何其他路都不太好。
这将允许您摆脱 br，因为自然地，div 在 CSS 中被定义为 display: block，这意味着它将在不同的行上。
要实现您想要的效果，您只需将 div 向左对齐，然后向每个 div 添加一个 100px padding-left。
不确定最佳实践，但我还没有听说您实际上需要字段集，而且在没有它们的情况下我在可访问性方面也过得很好。
是这样的吗？
- 使用伪元素堆叠
radio 按钮和 label 组合（在本例中为 :after）。不需要 <br>.
- 将
margin-left 应用于 input[type="radio"] 而不是 label。
使用 :after 我创建了一个空块 (display: block;)。这个空块放在 label 的末尾，因此它将下一个元素推到新行。
注：
为了便于解释，我用红色边框突出显示了空块（由 :after创建）。如有必要，请删除。
form {
background-color: #ffffb3;
font-family: Arial, sans-serif;
padding: 10px;
border: 2px solid #000000;
min-width: 600px;
max-width: 690px;
width: 80%;
margin: 0 auto;
min-height: 200px;
}
label {
margin-left: 100px;
}
input[type="radio"] {
margin-left: 100px;
}
input[type="radio"] + label {
margin-left: 10px;
}
input[type="radio"] + label:after {
content: '';
display: block;
/* Below code(border: 1px solid red;) is just for illustration, remove if necessary */
border: 1px solid red;
}
/*input[type="checkbox"]:checked + */
<form method="POST" action="mailto:eric.hepperle@pcc.edu">
<h2>Visitor Survey</h2>
<fieldset>
<label for="myName">Your Name:</label>
<input type="text" name="myName" id="myName">
<br>
<label for="email">Email Address:</label>
<input type="text" name="email" id="email">
<br>
</fieldset>
<p>What is your favorite movie?</p>
<input type="radio" name="movie" id="transformers" value="Transformers!">
<label for="transformers">Transformers!</label>
<input type="radio" name="movie" id="dark-knight" value="Dark Knight">
<label for="dark-knight">Dark Knight</label>
<input type="radio" name="movie" id="goodwillhunting" value="Good Will Hunting">
<label for="goodwillhunting">Good Will Hunting</label>
<br>
<br>
<input type="submit" value="Submit Query">
<input type="reset" value="Reset">
</form>
问题
我有一组垂直排列、堆叠的单选按钮。它们通过使用
标记在不同的行上。我想使用 CSS 将它们垂直对齐，左对齐，距左侧 100 像素。看起来并不那么难，但我还没有弄清楚。这是我为阐明所需结果而制作的插图：
默认对齐方式：
+----------------------------------------------------------------+
| |
| |
| |
| |
| * choice 1 |
| * choice 2 is a different length |
| * choice 3 is also long |
| |
| |
| |
| |
| |
+----------------------------------------------------------------+
所需的左对齐单选按钮，标签在右侧：
+----------------------------------------------------------------+
| |
| |
| |
| |
| * choice 1 |
| * choice 2 is a different length |
| * choice 3 is also long |
| |
| |
| |
| |
| |
+----------------------------------------------------------------+
代码
这是我的代码：
CSS & HTML
form {
background-color: #ffffb3;
font-family: Arial, sans-serif;
padding: 10px;
border: 2px solid #000000;
min-width: 600px;
max-width: 690px;
width: 80%;
margin: 0 auto;
min-height: 200px;
}
label {
margin-left: 100px;
postion: absolute;
}
/*input[type="checkbox"]:checked + */
<form method="POST" action="mailto:eric.hepperle@pcc.edu">
<h2>Visitor Survey</h2>
<fieldset>
<label for="myName">Your Name:</label>
<input type="text" name="myName" id="myName">
<br>
<label for="email">Email Address:</label>
<input type="text" name="email" id="email">
<br>
</fieldset>
<p>What is your favorite movie?</p>
<input type="radio" name="movie" id="transformers" value="Transformers!">
<label for="transformers">Transformers!</label>
<br>
<input type="radio" name="movie" id="dark-knight" value="Dark Knight">
<label for="dark-knight">Dark Knight</label>
<br>
<input type="radio" name="movie" id="goodwillhunting" value="Good Will Hunting">
<label for="goodwillhunting">Good Will Hunting</label>
<br>
<br>
<input type="submit" value="Submit Query">
<input type="reset" value="Reset">
</form>
我已经尝试过的
- 搜索了网络和 Stack Overflow，但结果并不完全适用。
- 我试过将按钮和标签都向左浮动，左边距：100 像素，绝对位置，但它不起作用。
- 我试过弄乱
input[type="radio"] + label（但我需要标签在第一位），但无济于事。 - 在字段集中包装单选按钮和标签。
我的问题
所以，我有几个问题：
- 如何在不使用 div 或字段集的情况下使用 CSS 优雅地做到这一点？或者，换句话说，这可以用简单的 CSS 和标签和 input[type="radio"] 选择器来完成吗？
- 我知道字段集是为了可访问性，但我想知道使用字段集是最佳实践，还是它们是一种越来越过时的技术？
- 我可以在不使用
标签的情况下将收音机及其标签垂直对齐吗？
首先，您应该用 divs 包装表单组。
我知道你说过不要使用它们，但这是最优雅、最简单的方法。走任何其他路都不太好。
这将允许您摆脱 br，因为自然地，div 在 CSS 中被定义为 display: block，这意味着它将在不同的行上。
要实现您想要的效果，您只需将 div 向左对齐，然后向每个 div 添加一个 100px padding-left。
不确定最佳实践，但我还没有听说您实际上需要字段集，而且在没有它们的情况下我在可访问性方面也过得很好。
是这样的吗？
- 使用伪元素堆叠
radio按钮和label组合（在本例中为:after）。不需要<br>. - 将
margin-left应用于input[type="radio"]而不是label。
使用 :after 我创建了一个空块 (display: block;)。这个空块放在 label 的末尾，因此它将下一个元素推到新行。
注：
为了便于解释，我用红色边框突出显示了空块（由 :after创建）。如有必要，请删除。
form {
background-color: #ffffb3;
font-family: Arial, sans-serif;
padding: 10px;
border: 2px solid #000000;
min-width: 600px;
max-width: 690px;
width: 80%;
margin: 0 auto;
min-height: 200px;
}
label {
margin-left: 100px;
}
input[type="radio"] {
margin-left: 100px;
}
input[type="radio"] + label {
margin-left: 10px;
}
input[type="radio"] + label:after {
content: '';
display: block;
/* Below code(border: 1px solid red;) is just for illustration, remove if necessary */
border: 1px solid red;
}
/*input[type="checkbox"]:checked + */
<form method="POST" action="mailto:eric.hepperle@pcc.edu">
<h2>Visitor Survey</h2>
<fieldset>
<label for="myName">Your Name:</label>
<input type="text" name="myName" id="myName">
<br>
<label for="email">Email Address:</label>
<input type="text" name="email" id="email">
<br>
</fieldset>
<p>What is your favorite movie?</p>
<input type="radio" name="movie" id="transformers" value="Transformers!">
<label for="transformers">Transformers!</label>
<input type="radio" name="movie" id="dark-knight" value="Dark Knight">
<label for="dark-knight">Dark Knight</label>
<input type="radio" name="movie" id="goodwillhunting" value="Good Will Hunting">
<label for="goodwillhunting">Good Will Hunting</label>
<br>
<br>
<input type="submit" value="Submit Query">
<input type="reset" value="Reset">
</form>