Question 44603 in Html Question posted in
Some basic documentation can be found here.

Can't align the input text with the radio button properly – Html

HTML

<fieldset>
        <label id="radio-buttons">Would you recommand this website?
            <input type="radio" name="radio" value="button" class="inline" checked>Yes</input>
            <input type="radio" name="radio" value="button" class="inline">No</input>
            <input type="radio" name="radio" value="button" class="inline">Maybe</input>
        </label>
</fieldset>

CSS

input{
    margin: 5px 0 0 0;
    width: 100%;
    min-height: 1.3em;
}
.inline{
     width: unset;
  margin: 0 0.5em 0 0;
  vertical-align: middle;
}

I tried aligning the radio buttons with the text itself but the buttons end up being a few pixels above the text, I tried everything I could find online and nothing works.

Tags:

2

Answers


  1. 0

    min-height offsets your alignment. You can drop it and it’s all good.
    You can also get rid of the vertical-align.

    In that case you need to rework the whole thing. Here’s a quick fix. And here’s more info on how to set it up properly in the future: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset

    p {
  margin: 0;
  /* optional, for the sake of SO editing */
}
    <fieldset>
  <p>Would you recommand this website?</p>
  <input type="radio" name="radio" value="button" id="yes" checked>
  <label for="yes">Yes</label><br>
  <input type="radio" name="radio" value="button" id="no">
  <label for="no">No</label><br>
  <input type="radio" name="radio" value="button" id="maybe">
  <label for="maybe">Maybe</label><br>
</fieldset>
    Login or Signup to reply.
  2. 0

    <Label> and <input> doesn’t work this way.

    This way clicking on Yes, No or Maybe will effect on their respectives radio boxes.

    fieldset {
  width     : fit-content;
  min-width : 20em;
  }
label {
  display : inline-block;
  margin  : .3em 2rem 0 0;
  }
 
    <fieldset>
  <legend> Would you recommand this website? </legend>
  <label>
    <input type="radio" name="radio" value="Yes" checked >
    Yes
  </label>
  <label>
    <input type="radio" name="radio" value="No" >
    No
  </label>
  <label>
    <input type="radio" name="radio" value="Maybe" >
    Maybe
  </label>
</fieldset>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search