html - 如何让输入单选元素(包括其文本)成为固定宽度？

Question

出于对齐目的，我需要我的输入单选元素 + 关联文本具有相同的宽度。我试过这个:

.rad {      
    width: 80px;
}

...但这只适用于 radio 元素本身(将它们置于一片空白的海洋中)。

所以我尝试了这个:

.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

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

方法 1:为单选按钮和选择使用单独的表格列。

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

   ... and so on.
</table>

方法二:将文字包裹在<label>中s 并为标签添加样式

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

CSS:

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