堆栈内存溢出
  简体   繁体   English

如何将文本与单选框和复选框输入的右侧对齐？

[英]How can I align text to the right side of radio and checkbox inputs?

 原文  2022-09-13 19:16:04  7   3    html/ css/ checkbox/ alignment/ radio

问题描述

I'm trying to have my checkboxes and radio inputs appear on the left side of the form tag with their labels appearing next to them.我试图让我的复选框和单选输入出现在表单标签的左侧，它们的标签出现在它们旁边。 However no matter how many examples I find, none of the solutions seem to help with me.但是，无论我找到多少示例，似乎没有一个解决方案对我有帮助。

All the displays are set to be flex.所有显示器都设置为柔性。 I've also commented out a couple of CSS lines as they are meant to work with JavaScript (which I haven't written yet).我还注释掉了几条 CSS 行，因为它们适用于 JavaScript（我还没有写）。 I doubt they were relevant as one sets the overall page display and the other hides elements with the class "hide-question", but I included them just in case there was something I was missing.我怀疑它们是否相关，因为一个设置整体页面显示，另一个使用 class “隐藏问题”隐藏元素，但我将它们包括在内以防万一我遗漏了什么。

I hope this is enough information.我希望这是足够的信息。 Any help would be appreciated.任何帮助，将不胜感激。

我想要的例子。

And here's my code:这是我的代码： 

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

3 个解决方案

解决方案1
 1  2022-09-13 19:26:18

If you want the labels after the inputs, why are all the label elements before the inputs in your markup?如果您想要输入之后的标签，为什么在您的标记中输入之前的所有 label 元素？

Also, with both radio buttons and checkboxes, labels can wrap inputs.此外，对于单选按钮和复选框，标签可以包装输入。 This eliminates the need for the for attributes and IDs, and it makes the labels clickable.这消除了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>

解决方案2
 0  2022-09-13 19:24:25

Just change the order of input in your code:只需更改代码中的输入顺序：

<li>
    <input type="checkbox" name="Greek" id="idgreek" />
    <label for="idgreek">Greek</label>
</li>


 * { 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; }
 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <title>Document</title> </head> <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> </html>

解决方案3
 0  2022-09-13 19:26:36

Simply put the label after the checkbox:只需将 label 放在复选框之后： 

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

解决方案4
 0  2022-09-13 19:28:44

  • To be honest, if I were you I will just put labels after input tags so it will automatically be next to each other after applying flex.老实说，如果我是你，我只会在input labels ，这样在应用 flex 后它会自动彼此相邻。
  • However If you do not want to change you html .但是，如果您不想更改html 。 all you need is flex-direction:row-reverse``. and你所需要的只是flex-direction:row-reverse``. and flex-direction:row-reverse``. and justify-content:flex:end```. flex-direction:row-reverse``. and justify-content:flex:end```。
  • I have added class reverseLabels to uls and applied below css.我已将 class 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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何将文本对齐到 div 的右侧？ - How can I align text to the right side of a div? 如何将标签和输入对齐到右侧 - how can I align the labels & inputs to the right 将文字对准按钮单选框的右侧 - Align text to the right side of a button radio 如何搜寻复选框/无线电/文本输入的页面并检测对其原始值的更改？ - How can I crawl the page for checkbox/radio/text inputs and detect changes to their original values? 如何将复选框放在右侧？ - How can I put the checkbox on the right side? 无法将菜单上的文本对齐到右侧 - Can't align text on menu to the right side 如何修复输入类型复选框右侧对齐并单击孔标签显示剩余文本？ - how to fix input type checkbox right side align and click hole label display remaining text? 我怎样才能在中间有一个文本并且文本是右对齐的 - how can i have a text in the middle and text that is right align 如何使复选框标签中的拆分文本垂直对齐？ - how can I make split text in a checkbox label align vertically? 如何使我的收音机、复选框和文本区域输入响应？ - How to make my radio, checkbox and text area inputs responsive?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM