HTML - 对齐单选按钮和文本

Question

HTML - 对齐单选按钮和文本

htmlbrowserradio-buttonalignmentvertical-alignment

3

假设您有两个相邻的简单表格单元格。
一个包含单选按钮和文本，另一个仅包含文本。

单选按钮的大小设置为16x16像素（不要问我为什么，请假设它就是这样）。
字体大小为12像素。

如何在所有主流浏览器中（或者相对接近）使标签和单选按钮在表格行的垂直中线上保持一致？

以下是示例HTML：

<style type="text/css">
td {
  font-size: 12px;
  font-family: Verdana;
}

.radio {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin: 0px;
}

.blah {
  text-decoration: line-through;
}
</style>

<table>
  <tr>
    <td>
      <input type="radio" class="radio" />
      <span class="blah">O</span>
    </td>
    <td>
      <span class="blah">O</span>
    </td>
  </tr>
</table>

在我安装的IE、Opera、Firefox和Chrome版本中，上述内容呈现如下图像。

我希望看到的结果就是这张图片所显示的那个......IE？说真的吗？

其他浏览器看起来都差不多，但是我试图对齐文本的任何尝试都会使它在至少两个浏览器中看起来很糟糕。

- mjomble

1

旁注：你为什么要使用表格呢？那太90年代了 ;) 使用浮动div代替吧！ - Dan Burton

5个回答

2

通过谷歌搜索“vertical-align:middle”，我找到了Gavin Kistner的这篇简短的说明，非常有用。我尝试了该页面上的最终建议，它似乎在Chrome、IE、Firefox、Opera和Safari中都能很好地呈现。

我的做法是添加td{ line-height:1.5em }——请参见链接进行解释。

- Dan Burton

1

<td>
  <input type="radio" class="radio" />
</td>
<td>
  <span class="blah">O</span> <!-- text -->
</td>
<td>
  <span class="blah">O</span> <!-- text2 -->
</td>

为什么不将文本放在自己的列中。

- gblazex

这段代码在不需要填充的情况下可以正常工作，但是一旦需要填充，第一个span标签就会变成独立的元素，而不是与单选按钮相关联的元素。 - alex

给它一个类名，然后设置padding:0; - gblazex

0

一种实现这个的方式是向你的两个单元格中的第一个添加一个嵌套表格，然后将单选按钮和第一个 span 放在两个单元格中（在嵌套表格内）。

<table> 
  <tr> 
    <td> 
      <table><tr><td><input type="radio" class="radio" /></td>
      <td><span class="blah">O</span></td></tr></table>
    </td> 
    <td> 
      <span class="blah">O</span> 
    </td> 
  </tr> 
</table>

- alex

因为表格是作为一种设计工具而被发明的。 ;) - Gert Grenander

外部表格在我从中得到这个例子的原始问题中实际上是相当合理的，因为我需要将内容排列成实际的网格。所以我仍然想避免使用这些内部的“hack表” :)但无论如何，我已经得到了一个解决问题的答案。 - mjomble

0

快速尝试：

将收音机输入元素放在自己的表格单元格中？这样至少文本应该彼此对齐。
将vertical-align:middle;添加到td而不是.radio？可能仍会导致问题，因为带有收音机输入元素的单元格中文本的基线仍可能由输入元素确定...

- orithena

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- tcooc · Accepted Answer

一个快速解决方法是将td的font-size:12px;和radio的width:16px;height:16px;设置为相等。

2个例子：

td {
  font-size: 12px;
}
input[type=radio] {
  width: 12px; /* resize radio */
  height: 12px;
}

并且

td {
  font-size: 16px; /* resize font-size */
}
input[type=radio] {
  width: 16px;
  height: 16px;
}