Home > Software engineering >  How can I align text to the right side of radio and checkbox inputs?
How can I align text to the right side of radio and checkbox inputs?

Time：09-14

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.

Example of what I want.

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 >

      <div id="question-4" >
        <p ><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" >
        <p ><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>

CodePudding user response：

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 >

      <div id="question-4" >
        <p ><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" >
        <p ><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>

CodePudding user response：

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 >

      <div id="question-4" >
        <p ><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" >
        <p ><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>

CodePudding user response：

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 >
        <div id="question-4" >
          <p ><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" >
          <p >
            <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>

CodePudding user response：

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

      <div id="question-4" >
        <p ><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" >
        <p ><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>

Page link：https//www.codepudding.com/Softwareengineering/543755.html

Prev:containers with images of different sizes; container width won't go past the image width
Next:Why does the border of tr not show unless the parent table tag has the border-collapse property set
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding