CODEWITHSUNDEEP
htmlcssformsbutton
Distro
Distro

Reputation: 45

how to align button radio in css

I am trying to align the button radios on my page and it seems that one of the buttons (Gender) is highly indented. The radio for the M (Gender) is at the center and the other button is at the far right. I've been changing the values in css but it doesn't align. How do I align them? Anyone help? My css is combined and I got most of help here from SO.

form {
  width: 80%;
  margin: 0 auto;
}
label,
input {
  display: inline-block;
}
label {
  width: 30%;
}
label + input {
  width: 30%;
  margin: 0 10% 0 1%;
}
.label-align input[type="checkbox"] {
  cursor: pointer;
  margin-top: 6px;
}
.label-align span {
  margin: 0 0 10px 10px;
  display: block;
}
.left {
  float: left;
}
<div id="register" class="container">
  <form action="" method="post">
    <label>*First Name:</label>
    <input type="text">
    <br>
    <label>*Last Name:</label>
    <input type="text">
    <br>
    <label>*Birth Date:</label>
    <input type="text">
    <br>
    <label>*Gender:</label>
    <input type="radio" name="gender" value="male" checked>M
    <input type="radio" name="gender" value="female" checked>F
    <br>
    <label>*Email:</label>
    <input type="text">
    <br>
    <label>*Password:</label>
    <input type="text">
    <br>
    <label>*Re-enter Password:</label>
    <input type="text">
    <br>
    <button class="button" type="submit" value="Submit" onclick="" style="vertical-align:middle"><span>Submit</span>
    </button>
  </form>
</div>

Upvotes: 1

Views: 1515

Answers (4)

GS Bala
GS Bala

Reputation: 400

Please add following css,

input[type="radio"] {
    margin: 4px 4px 4px 4px;
    width: 2%;
}

Upvotes: 1

Bijal
Bijal

Reputation: 132

In your code add one class like this

        <input type="radio" name="gender" class="gender" value="male" checked>M
        <input type="radio" name="gender" value="female" checked>F<br>

in your css style property add this class gender property like this.

 .gender{
  width: 0px !important;
  margin: 0px 0px 0px 4px !important;
  }

Upvotes: 0

Natalie Hedstr&#246;m
Natalie Hedstr&#246;m

Reputation: 2631

This is happening because of this the following style.

label + input {
  width: 30%;
  margin: 0 10% 0 1%;
}

All inputs following a label will gain a width of 30%. The reason only the first radio-button is affected by this is because it's the one that's adjacent to the gender label.

You could change this rule so it only affects input boxes for example.

label + input[type='text'] {
  width: 30%;
  margin: 0 10% 0 1%;
}

Snippet example

form {
  width: 80%;
  margin: 0 auto;
}
label,
input {
  display: inline-block;
}
label {
  width: 30%;
}
label + input[type='text'] {
  width: 30%;
  margin: 0 10% 0 1%;
}
.label-align input[type="checkbox"] {
  cursor: pointer;
  margin-top: 6px;
}
.label-align span {
  margin: 0 0 10px 10px;
  display: block;
}
.left {
  float: left;
}
<div id="register" class="container">
  <form action="" method="post">
    <label>*First Name:</label>
    <input type="text">
    <br>
    <label>*Last Name:</label>
    <input type="text">
    <br>
    <label>*Birth Date:</label>
    <input type="text">
    <br>
    <label>*Gender:</label>
    <input type="radio" name="gender" value="male" checked>M
    <input type="radio" name="gender" value="female" checked>F
    <br>
    <label>*Email:</label>
    <input type="text">
    <br>
    <label>*Password:</label>
    <input type="text">
    <br>
    <label>*Re-enter Password:</label>
    <input type="text">
    <br>
    <button class="button" type="submit" value="Submit" onclick="" style="vertical-align:middle"><span>Submit</span>
    </button>
  </form>
</div>

Upvotes: 2

Sardor Dushamov
Sardor Dushamov

Reputation: 1667

label + input {
  width: 30%;
  margin: 0 10% 0 1%;
}

Remove width :30%;

Upvotes: 1

Related Questions