html - 如何强制 html 表格的 "td"元素内的单独元素以内联方式显示(从左到右)？

Question

我正在更新一个旧的 ASP.NET Web 窗体应用程序，我的团队以前只在 IE 上支持它，以便与现代浏览器(Chrome、Firefox 等)兼容。除其他问题外，我对图标(恰好也是链接)在应用程序加载时生成的某个表的单个“td”元素中的显示方式有一个小问题。这些图标是指向与表格的每个条目/行相关的各种选项的链接。

在 IE 上，图标从左到右内联排列。但在其他浏览器上，图标是垂直堆叠的。我被告知要使样式与它在 IE 中的外观一致。

我认为这将是更改一些 CSS 的简单问题，但到目前为止我还无法让它发挥作用。我正在谈论的图标是元素的子元素，并且是元素或 的(然后有自己的 img 子元素)，所以我尝试了

td img {
display: inline-block;
}

td a {
display: inline-block;
}

但这根本没有效果。

html(一旦生成)的结构类似于

(within table, body, row...)

<td>
 <img src="icon1.gif">
 <a href=JavaScript:editThisEntry(entryNumber)>
    <img src="icon2.gif">
 </a>
 <a href=JavaScript:doADifferentEdit(entryNumber)>
    <img src="icon3.gif">
 </a>
</td>

因此，预期结果:一个元素中的三个图标排成一行(并且 td 足够宽以容纳)。

实际:三个带有 a 的图标相互堆叠，使每一行从上到下都“胖”，并使表格看起来很糟糕。

我对这些东西很陌生，所以我觉得我错过了一些简单的东西，但我没有通过谷歌找到我的确切问题的描述。感谢任何帮助，谢谢!

Answer 1

谢谢大家。好的建议。最终，pcalkins 的响应对我有用，但我不得不稍微调整一下以将其添加到我的 CSS 样式表中。我最终使用了这个:

td {
  white-space: nowrap;
}