stackoom
  简体   繁体   中英

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

Question

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). 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.

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 answers

solution1
 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?

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. 

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

solution2
 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>

solution3
 0  2022-09-13 19:26:36

Simply put the label after the checkbox: 

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

solution4
 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.
  • However If you do not want to change you html . all you need is flex-direction:row-reverse``. and flex-direction:row-reverse``. and justify-content:flex:end```.
  • I have added class reverseLabels to uls and applied below 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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question 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?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM