如何获得固定宽度的输入单选元素（包括其文本）？
克莱·香农（B. Clay Shannon）
为了对齐目的，我需要输入单选元素+关联的文本具有相同的宽度。我尝试了这个：
.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
尝试答案，我得到：
约翰·布皮特
方法2：将文本换成
您需要更改标记以实现此目的。有很多方法，这里是其中的两种。
方法1：使用单独的表格列的单选按钮和选择。
<table>
<tr>
<td>
<input type="radio" class="rad" id="visitor" name="travelertype" />Visitor
</td>
<td>
<select ...>
</td>
</tr>
... and so on.
</table>
方法2：将文本换成<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;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何获得输入单选元素以水平对齐？
- 2
如何获得所需高度和宽度的文本？
- 3
如何在父元素内固定文本，使其不会超出父元素的宽度
- 4
使水平单选按钮小部件的宽度固定
- 5
如何将输入元素的宽度调整为初始文本的大小？
- 6
如何在Python Selenium中按类名称及其文本查找元素
- 7
如何固定桌子的宽度
- 8
给文本输入剩余宽度
- 9
（特定于IE）如何确定输入的文本是否长于输入元素的宽度
- 10
如何使AlertDialog以等宽字体显示其文本？
- 11
如何均匀固定宽度？
- 12
如何获得输入单选元素以在react [material-ui]中水平对齐？
- 13
如何获得具有继承宽度的元素的宽度？
- 14
文本到列固定宽度的输入框-Excel崩溃
- 15
如何在标签内的输入单选元素中添加样式？
- 16
固定宽度的填充元素
- 17
我如何获得我的输入单选按钮的值？
- 18
输入元素如何获得各自的父表单？
- 19
Flutter-如何使TextField宽度适合其文本（“环绕内容”）
- 20
如何将Excel数据粘贴为固定宽度的文本？
- 21
如何获得带有浮动元素的元素的实际宽度
- 22
（特定于IE）如何确定输入的文本是否长于输入元素的宽度
- 23
jQuery获取所有输入表单元素，包括单选
- 24
如何获得两个相邻的跨度以垂直显示其文本？
- 25
如何使输入元素占据固定宽度元素旁边的可用空间？
- 26
如何在flexbox元素内使用固定宽度？
- 27
如何固定桌子宽度
- 28
如何按值计算 HTML 单选输入元素？
- 29
如何以固定宽度显示 <a href> 长文本
我来说两句