【问题标题】：How can I align text to the right side of radio and checkbox inputs?如何将文本对齐到单选框和复选框输入的右侧？
【发布时间】：2023-02-03 05:56:28
【问题描述】：
我试图让我的复选框和单选输入出现在表单标签的左侧，它们的标签出现在它们旁边。然而，无论我找到多少例子，似乎没有一个解决方案对我有帮助。
所有显示器都设置为 flex。我还注释掉了几行 CSS，因为它们旨在与 JavaScript（我还没有编写）一起使用。我怀疑它们是否相关，因为一个设置整个页面显示，另一个隐藏带有“隐藏问题”类的元素，但我将它们包括在内以防万一我遗漏了什么。
我希望这是足够的信息。任何帮助，将不胜感激。
这是我的代码：
* {
margin: 0;
padding: 0;
}
h2,
p,
label {
color: #231f20;
}
h2,
p {
font-weight: bold;
}
body {
font-family: Arial, Helvetica, sans-serif;
box-sizing: border-box;
padding: 10px;
}
form {
display: flex;
/*height: 100vh;*/
justify-content: center;
align-items: center;
background-color: #fac08e;
}
header {
width: 100%;
background-color: #fac08e;
overflow: hidden;
}
input,
select {
margin-top: 6px;
}
li {
list-style: none;
margin: 10px 0;
}
textarea {
resize: none;
font-family: Arial, Helvetica, sans-serif;
padding: 5px;
}
/*.hide-question {
display: none;
}*/
.question {
background-color: #fcd6b5;
display: flex;
flex-direction: column;
padding: 10%;
border-radius: 20px;
}
.question-title {
font-size: 20px;
margin-bottom: 5px;
}
.question-title span {
font-size: 24px;
margin-right: 12px;
}
#question-20 input,
#question-21 input {
display: block;
}
<body>
<form action="results.html" method="GET" enctype="multipart/form-data">
<div class="question">
<div id="question-4" class="hide-question">
<p class="question-title"><span>4</span> Are you a Citizen?</p>
<ul>
<li>
<label for="idyesCitizen">Yes</label>
<input type="radio" name="Citizenship" id="idyesCitizen" value="Yes">
</li>
<li>
<label for="idnoCitizen">No</label>
<input type="radio" name="Citizenship" id="idnoCitizen" value="No">
</li>
</ul>
</div>
<div id="question-6" class="hide-question">
<p class="question-title"><span>6</span> What other Languages can you speak?</p>
<ul>
<li>
<label for="idmandarin">Mandarin</label>
<input type="checkbox" name="Mandarin" id="idmandarin">
</li>
<li>
<label for="iditalian">Italian</label>
<input type="checkbox" name="Italian" id="iditalian">
</li>
<li>
<label for="idarabic">Arabic</label>
<input type="checkbox" name="Arabic" id="idarabic">
</li>
<li>
<label for="idcantonese">Cantonese</label>
<input type="checkbox" name="Cantonese" id="idcantonese">
</li>
<li>
<label for="idgreek">Greek</label>
<input type="checkbox" name="Greek" id="idgreek">
</li>
</ul>
</div>
</div>
</form>
</body>
【问题讨论】：
-
请使用tour，这样您就知道如何跟进您的问题。不鼓励使用“谢谢”cmets。
标签：
html
css
checkbox
radio-button
alignment
【解决方案1】：
如果你想要输入后的标签，为什么所有的标签元素前标记中的输入？
此外，对于单选按钮和复选框，标签可以裹输入。这消除了对 for 属性和 ID 的需要，和它使标签可点击。
* {
margin: 0;
padding: 0;
}
h2,
p,
label {
color: #231f20;
}
h2,
p {
font-weight: bold;
}
body {
font-family: Arial, Helvetica, sans-serif;
box-sizing: border-box;
padding: 10px;
}
form {
display: flex;
/*height: 100vh;*/
justify-content: center;
align-items: center;
background-color: #fac08e;
}
header {
width: 100%;
background-color: #fac08e;
overflow: hidden;
}
input,
select {
margin-top: 6px;
}
li {
list-style: none;
margin: 10px 0;
}
textarea {
resize: none;
font-family: Arial, Helvetica, sans-serif;
padding: 5px;
}
/*.hide-question {
display: none;
}*/
.question {
background-color: #fcd6b5;
display: flex;
flex-direction: column;
padding: 10%;
border-radius: 20px;
}
.question-title {
font-size: 20px;
margin-bottom: 5px;
}
.question-title span {
font-size: 24px;
margin-right: 12px;
}
#question-20 input,
#question-21 input {
display: block;
}
<body>
<form action="results.html" method="GET" enctype="multipart/form-data">
<div class="question">
<div id="question-4" class="hide-question">
<p class="question-title"><span>4</span> Are you a Citizen?</p>
<ul>
<li>
<label>
<input type="radio" name="Citizenship" value="Yes">
Yes
</label>
</li>
<li>
<label>
<input type="radio" name="Citizenship" value="No">
No
</label>
</li>
</ul>
</div>
<div id="question-6" class="hide-question">
<p class="question-title"><span>6</span> What other Languages can you speak?</p>
<ul>
<li>
<label>
<input type="checkbox" name="Mandarin">
Mandarin
</label>
</li>
<li>
<label>
<input type="checkbox" name="Italian">
Italian
</label>
</li>
<li>
<label>
<input type="checkbox" name="Arabic">
Arabic
</label>
</li>
<li>
<label>
<input type="checkbox" name="Cantonese">
Cantonese
</label>
</li>
<li>
<label>
<input type="checkbox" name="Greek">
Greek
</label>
</li>
</ul>
</div>
</div>
</form>
</body>
只需将标签放在复选框之后：
* {
margin: 0;
padding: 0;
}
h2,
p,
label {
color: #231f20;
}
h2,
p {
font-weight: bold;
}
body {
font-family: Arial, Helvetica, sans-serif;
box-sizing: border-box;
padding: 10px;
}
form {
display: flex;
/*height: 100vh;*/
justify-content: center;
align-items: center;
background-color: #fac08e;
}
header {
width: 100%;
background-color: #fac08e;
overflow: hidden;
}
input,
select {
margin-top: 6px;
}
li {
list-style: none;
margin: 10px 0;
}
textarea {
resize: none;
font-family: Arial, Helvetica, sans-serif;
padding: 5px;
}
/*.hide-question {
display: none;
}*/
.question {
background-color: #fcd6b5;
display: flex;
flex-direction: column;
padding: 10%;
border-radius: 20px;
}
.question-title {
font-size: 20px;
margin-bottom: 5px;
}
.question-title span {
font-size: 24px;
margin-right: 12px;
}
#question-20 input,
#question-21 input {
display: block;
}
<body>
<form action="results.html" method="GET" enctype="multipart/form-data">
<div class="question">
<div id="question-4" class="hide-question">
<p class="question-title"><span>4</span> Are you a Citizen?</p>
<ul>
<li>
<input type="radio" name="Citizenship" id="idyesCitizen" value="Yes">
<label for="idyesCitizen">Yes</label>
</li>
<li>
<input type="radio" name="Citizenship" id="idnoCitizen" value="No">
<label for="idnoCitizen">No</label>
</li>
</ul>
</div>
<div id="question-6" class="hide-question">
<p class="question-title"><span>6</span> What other Languages can you speak?</p>
<ul>
<li>
<input type="checkbox" name="Mandarin" id="idmandarin">
<label for="idmandarin">Mandarin</label>
</li>
<li>
<input type="checkbox" name="Italian" id="iditalian">
<label for="iditalian">Italian</label>
</li>
<li>
<input type="checkbox" name="Arabic" id="idarabic">
<label for="idarabic">Arabic</label>
</li>
<li>
<input type="checkbox" name="Cantonese" id="idcantonese">
<label for="idcantonese">Cantonese</label>
</li>
<li>
<input type="checkbox" name="Greek" id="idgreek">
<label for="idgreek">Greek</label>
</li>
</ul>
</div>
</div>
</form>
</body>
- 老实说，如果我是你，我会把
labels放在input标签之后，这样在应用flex后它们会自动相邻。
- 但是如果你不想改变你
html。你只需要flex-direction:row-reverse``. and justify-content:flex:end```。
- 我已将类
reverseLabels 添加到 uls 并在 css 下应用。
.reverseLabels>li {
display: flex;
align-items: center;
flex-direction: row-reverse;
justify-content: flex-end;
}
* {
margin: 0;
padding: 0;
}
h2,
p,
label {
color: #231f20;
}
h2,
p {
font-weight: bold;
}
body {
font-family: Arial, Helvetica, sans-serif;
box-sizing: border-box;
padding: 10px;
}
form {
display: flex;
/*height: 100vh;*/
justify-content: center;
align-items: center;
background-color: #fac08e;
}
header {
width: 100%;
background-color: #fac08e;
overflow: hidden;
}
input,
select {
margin-top: 6px;
}
li {
list-style: none;
margin: 10px 0;
}
textarea {
resize: none;
font-family: Arial, Helvetica, sans-serif;
padding: 5px;
}
/*.hide-question {
display: none;
}*/
.question {
background-color: #fcd6b5;
display: flex;
flex-direction: column;
padding: 10%;
border-radius: 20px;
}
.question-title {
font-size: 20px;
margin-bottom: 5px;
}
.question-title span {
font-size: 24px;
margin-right: 12px;
}
#question-20 input,
#question-21 input {
display: block;
}
/*To acheive desire output use this css if you do not want to change html*/
.reverseLabels>li {
display: flex;
align-items: center;
flex-direction: row-reverse;
justify-content: flex-end;
}
.reverseLabels>li input {
margin-top: 0;
}
<body>
<form action="results.html" method="GET" enctype="multipart/form-data">
<div class="question">
<div id="question-4" class="hide-question">
<p class="question-title"><span>4</span> Are you a Citizen?</p>
<ul class="reverseLabels">
<li>
<label for="idyesCitizen">Yes</label>
<input type="radio" name="Citizenship" id="idyesCitizen" value="Yes">
</li>
<li>
<label for="idnoCitizen">No</label>
<input type="radio" name="Citizenship" id="idnoCitizen" value="No">
</li>
</ul>
</div>
<div id="question-6" class="hide-question">
<p class="question-title"><span>6</span> What other Languages can you speak?</p>
<ul class="reverseLabels">
<li>
<label for="idmandarin">Mandarin</label>
<input type="checkbox" name="Mandarin" id="idmandarin">
</li>
<li>
<label for="iditalian">Italian</label>
<input type="checkbox" name="Italian" id="iditalian">
</li>
<li>
<label for="idarabic">Arabic</label>
<input type="checkbox" name="Arabic" id="idarabic">
</li>
<li>
<label for="idcantonese">Cantonese</label>
<input type="checkbox" name="Cantonese" id="idcantonese">
</li>
<li>
<label for="idgreek">Greek</label>
<input type="checkbox" name="Greek" id="idgreek">
</li>
</ul>
</div>
</div>
</form>
</body>