如何让输入单选元素（包括其文本）成为固定宽度？

Question

为了对齐，我需要输入单选元素 + 关联文本的宽度相同。我试过这个：

.rad {      
    width: 80px;
}

...但这只适用于无线电元素本身（将它们置于一片空白的海洋中）。

所以我尝试了这个：

.rad text {      
    width: 160px;
}

...但它什么也没做。

用于样式的 html 是：

<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

更新 2

尝试回答，我得到：

Answer 1

对于屏幕阅读器，您应该在 <label> 中的每个单选按钮之后放置文本。这也有助于 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>

您可以使用容器 <td>.

设置整个单元格的样式

td {
    width: 80px;
}

Answer 2

看到这个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>

Answer 3

您需要更改标记才能实现此目的。方法有很多种，这里介绍2种。

方法 1：为单选按钮和选择使用单独的 table 列。

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

   ... and so on.
</table>

方法 2：将文本包裹在 `<label>` 中并为标签添加样式

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

html

css

radio-button

更新 2

方法 1：为单选按钮和选择使用单独的 table 列。

方法 2：将文本包裹在 `<label>` 中并为标签添加样式

如何让输入单选元素（包括其文本）成为固定宽度？

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

html

css

radio-button

更新 2

方法 1：为单选按钮和选择使用单独的 table 列。

方法 2：将文本包裹在 <label> 中并为标签添加样式

方法 2：将文本包裹在 `<label>` 中并为标签添加样式