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

Hoarfrost 0
Viewed 37

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

radio alignment checkbox css html
3 Answers

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>

isherwood0

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>

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

Nikkkshit0
Related