0

我必须创建一个表格，其中包含有关电视节目广播的信息，例如时间表。

所以我的第一行是以小时为特色的列（1PM | 1:30 | 2PM...），左列（行）以频道为特色：

A&E ABCFAM AMC ANPL BBC [等等......其中有 20 个。]

在每个频道的名称之前都有一个图标[gif格式]，这个图标表示数字。

所以我这样做了：

HTML：

<th scope="row"><img src="images/53.gif" alt="" class="channel-number">WPGH</th>

CSS：

.channel-number {
width: 12px;
height: 12px;
float: left;
padding-left: 2px;
padding-right: 2px;
 }

但是，我想知道是否有更简单的方法可以使用 CSS 来做到这一点。这个图标不是背景图片，它更像是“内容”，我有 20 个这样的小 GIF。我必须在 CSS 中做什么才能让它们显示在右侧，而频道名称显示在左侧？

这是我正在处理的一张非常但非常长且复杂的表格，这是我似乎根本无法正确处理的一个功能。我将不胜感激任何意见。

4

1 回答 1

1

如果图标被认为是内容，那么它应该是 html。这不是因为它是图形的，所以它必须在 css 中处理。当然，图像的布局应该在那里完成。

要将图像放在文本的右侧，只需将其浮动到右侧而不是左侧

float:right

它将留在表格单元格内。或者，使用绝对定位将其强制到右侧，并且不影响通道名称的显示。

另一件事：利用你的alt属性。您可以使用图形来显示程式化的数字 53，但您确实需要将 alt 设置为 53，以便屏幕阅读器、机器人、文本浏览器等。

找出一个有意义的 alt 属性可能很困难，但在这种情况下，它很容易:)

<th scope="row"><img src="images/53.gif" alt="53" class="channel-number">WPGH</th>
于 2013-10-17T09:11:35.567 回答