CODEWITHSUNDEEP
html
user517406
user517406

Reputation: 13773

radio button alignment

I am using radio buttons, but I am not sure how to align them how I want. I want them to be on the same line like this :

Option 1 o   Option 2 o

But they appear like this :

Option 1 o
Option 2 o

Here is my HTML, can anybody advise?

<table>
                <tr>
                    <td>
                        <label for="lblMeterName" />
                    </td>
                </tr>
                <tr>
                    <td>
                        Input/Output Group :
                    </td>
                    <td>
                        <input type="radio" name="rdoInput" value="Yes"/> Yes
                        <input type="radio" name="rdoInput" value="No"/> No
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="button" id="dialogButton" name="dialogButton" value="Submit" />
                    </td>
                </tr>
            </table>

Upvotes: 0

Views: 5569

Answers (6)

Rob Cain
Rob Cain

Reputation: 21

Give your radio buttons and labels a class as follows:

<input type="radio" id="radioYes" class="inline-radio" name="radioGroup" value="Yes" />
<label for="radioYes" class="inline-radio">Yes</label>
<input type="radio" id="radioNo" class="inline-radio" name="radioGroup" value="No" />
<label for="radioNo" class="inline-radio">No</label>

Then apply the following CSS:

.inline-radio {
    display: inline-block;
}

This is an improvement over the float method because float often requires additional semantics to prevent undesired rendering, whereas inline-block does not.

Upvotes: 2

Aron Rotteveel
Aron Rotteveel

Reputation: 83163

There are multiple solutions for this:

  1. You could wrap another table around the radiobuttons and add each one to a table cell.
  2. Add a <br/> after each option.
  3. You could float the radiobuttons.
  4. You could add a display:inline or display:inline-block to the radiobuttons.

I would prefer wrapping both the radiobutton and it's label in a <label> tag and applying float, since this would make the label clickable as well and provide you with more flexibility:

<label class="radio-label"><input type="radio" name="rdoInput" value="Yes"/> Yes</label>
<label class="radio-label"><input type="radio" name="rdoInput" value="No"/> No</label>

And the CSS:

label.radio-label {
    float: left;
    margin-right: 10px;
}

Upvotes: 1

danx
danx

Reputation: 1

Use this:

<table>
<tr>
  <td><input type="radio" name="rdoInput" value="Yes"/> Yes</td>
  <td><input type="radio" name="rdoInput" value="No"/> No</td>
</tr>
<tr>
  <td colspan=2><input type="button" id="dialogButton" name="dialogButton" value="Submit" />
</td>
</tr>
</table>

Upvotes: 0

Distdev
Distdev

Reputation: 2312

You can wrap input and text into div and set float css property for div.

Upvotes: 1

Nikita Barsukov
Nikita Barsukov

Reputation: 2984

Add non-breaking spaces &nbsp; between radio buttons;

Upvotes: 0

Martin Hennings
Martin Hennings

Reputation: 16846

Put them in a table like this:

                <td>
                  <table><tr><td>
                    <input type="radio" name="rdoInput" value="Yes"/> Yes
                  </td><td>
                    <input type="radio" name="rdoInput" value="No"/> No
                  </td></tr></table>
                </td>

This gives you the most flexibility concerning space in between or alignment with parent object.

Upvotes: 1

Related Questions