HTML - 对齐单选按钮和文本

发布于 2024-09-07 08:14:44 字数 949 浏览 2 评论 0原文

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

单选按钮的大小设置为 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 版本中，上面的内容呈现为 this

我期望看到的结果是... ...IE 在该图像上显示的结果？严重地？

其余的看起来足够接近，但我尝试排列文本的任何尝试都使其在 4 个浏览器中的至少 2 个中看起来总是很糟糕。

原文

Say you've got two simple table cells next to each other.
One contains a radio button and text. The other one contains just text.

The radio button's size is set to 16x16 pixels (don't ask me why, assume that it just is).
The font size is 12 pixels.

How do you make both labels and the radio button to line up consistently in all major browsers along (or reasonably close to) the vertical middle of the table row?

Sample HTML to get you started:

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

In my installed versions of IE, Opera, Firefox and Chrome, the above renders like this

The result I'm expecting to see is the one displayed on that image by... ...IE? Seriously?

The rest look close enough, but any attempts I made to line up the text made it always look awful in at least 2 of the 4 browsers.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

送舟行 2024-09-14 08:14:44

谷歌搜索“vertical-align:middle”发现了 Gavin Kistner 的这个简短的解释，这很有用。我在该页面上尝试了最终建议，该建议似乎在 Chrome、IE、Firefox、Opera 和 Safari 中都能正常呈现。

我所做的是添加 td{ line-height:1.5em } - 请参阅链接以获取解释。

回复收藏 0 原文

旧夏天 2024-09-14 08:14:44

一个快速解决方法是使 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;
}

A quick fix is to make the font-size:12px; of the td and width:16px;height:16px; of the radio equal.

2 examples:

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

and

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

回复收藏 0 原文

泪意 2024-09-14 08:14:44

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

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

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

Why don't you put the text in its own column.

回复收藏 0 原文

枕头说它不想醒 2024-09-14 08:14:44

实现此目的的一种方法是将嵌套表添加到两个单元格中的第一个，并将单选按钮和第一个跨度放入两个单元格中（在嵌套表内）

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

One way to accomplish this would be to add a nested table to the first of your two cells, and put the radio button and first span in two cells (within the nested table)

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

回复收藏 0 原文