How can I get an input radio element (including its text) to be a fixed width?

Question

I need my input radio elements + associated text to be the same width for alignment purposes. I tried this:

.rad {      
    width: 80px;
}

...but that only works on the radio element itself (centers them in a sea of blankness).

So I tried this:

.rad text {      
    width: 160px;
}

...but it does nothing.

The html intended for styling is:

<input type="radio" class="rad" id="visitor" name="travelertype" />Visitor
<input type="radio" class="rad" id="ucstudent" name="travelertype"/>UC Student
<input type="radio" class="rad" id="ucemployee" name="travelertype"/>UC Employee

UPDATE 2

Trying the answer, I get:

Why is there a `` ending after the second input? Are the inputs a part of a table? Can you post that, the current output, and the expected output, if possible? — John Bupit, Aug 18 '15 at 22:51
Do you have access to that HTML? You can simple wrap radio buttons + text in... something, and give it width? — sinisake, Aug 18 '15 at 22:54
@JohnBupit: I just failed to edit it out; all of these are in tds. — B. Clay Shannon-B. Crow Raven, Aug 18 '15 at 22:56
You must be aware, but [you should only use tables if you really have tabular data](http://stackoverflow.com/q/83073/1492578). — John Bupit, Aug 18 '15 at 23:37
@JohnBupit: Nonsense; tables work well for arranging/aligning elements. — B. Clay Shannon-B. Crow Raven, Aug 19 '15 at 16:49

DivideByZero · Answer 1 · 2015-08-18T23:05:54.627

You should put the text after each radio button in a <label> for screen readers. This will also help with the CSS.

<td><input type="radio" class="rad" id="visitor" name="travelertype" /><label for="Visitor">Visitor</label></td>
<td><input type="radio" class="rad" id="ucstudent" name="travelertype"/><label for="UC Student">UC Student</label></td>
<td><input type="radio" class="rad" id="ucemployee" name="travelertype"/><label for="UC Employee">UC Employee</label></td>

You can style the whole cell with the container <td>.

td {
    width: 80px;
}

score 1 · Answer 2 · answered Aug 18 '15 at 23:03

See this https://jsfiddle.net/byB9d/6228/

<p><input type="radio" class="rad" id="visitor" name="travelertype" /> Value</p>

<p><input type="radio" class="rad" id="ucstudent" name="travelertype"/>
    UC Student</p>

<p><input type="radio" class="rad" id="ucemployee" name="travelertype"/>
    UC Employee</p>

score 1 · Accepted Answer · answered Aug 18 '15 at 23:32

You'll need to change the markup to achieve this. There are many ways, here's 2 of them.

Method 1: Use separate table columns for radio buttons and the selects.

<table>
   <tr>
      <td>
        <input type="radio" class="rad" id="visitor" name="travelertype" />Visitor
      </td>
      <td>
         <select ...>
      </td>
   </tr>

   ... and so on.
</table>

Method 2: Wrap the text in `<label>`s and add style to the labels

<input type="radio" class="rad" id="visitor" name="travelertype" /><label for="travelertype" class="label-radio">Visitor</label>

CSS:

label.label-radio {
    width: 100px;
}

How can I get an input radio element (including its text) to be a fixed width?

UPDATE 2

3 Answers3

Method 1: Use separate table columns for radio buttons and the selects.

Method 2: Wrap the text in <label>s and add style to the labels

Method 2: Wrap the text in `<label>`s and add style to the labels