Question

我正在尝试将一些图标放在表格单元格<td>中，但结果是它们位于屏幕的右上角（表格单元格之外）。

我的代码的简短版本是这样的：

<td class="td_name">
  <div class="actions">
    <div class="floatLeft iconset_16px update_sprite_bw_16px" title="Update"></div>
    <div class="floatLeft iconset_16px settings_sprite_bw_16px" title="Settings"></div>
    <div class="floatLeft iconset_16px delete_sprite_bw_16px" title="delete"></div>
  </div>
  <div class="gal_name">
    Some name
  </div>
</td>

td_name位置设置为 relative ，action设置为绝对。这应该有效，但不是这次。

我在这里缺少什么？ Se full code example on jsFidle

注意

我正在尝试将action DIV 放在<{1}}内。如果您的jsFiddle静止图像在jsFiddle的HTML窗口的右上角显示<td class="td_name"> div，那么您的示例也不起作用。

iconset_16px

注2
这适用于不熟悉表格用法的每个人。

在90年代早期，使用表格进行页面布局非常流行且非常简单。但设计师很快就明白，改变布局是一个痛苦的问题。表的使用也有several more disadvantages。

所以是的，你可以在不使用表的情况下设计任何东西。

那么你什么时候使用桌子？表通常用于显示表格数据。这是一种用于网络的Excel表格。我的经验是，构建表数据要比列表元素和div更容易。所以在某些情况下我会使用表格知道这对网站没有任何负面影响。

所以，请不要开始讨论使用表格有多糟糕。用你的精力帮我解决问题：）

Answer 1

经过一些更多测试后，看起来无法定位表格单元格。哪种有道理。但我并没有试图将表格单元本身定位，而是单元格中的内容。

经过对网络的更多研究（以及此处的一些无用的辩论），I found this article。这基本上给了我简短的答案：不，这是不可能的。

在他们的例子中，他们使用jQuery。但由于我仍然想用CSS做这件事，我想出了另一种解决方案。

我只是将我的内容包装在表格单元格中的DIV中，并确保此DIV与表格单元格一样大。瞧，一切都很好：）

.wrapper { width: 200px; height: 100px; line-height: 100px; position: relative; border: solid 1px #666; }
.actions { position: absolute; top: 0px; right: 0px; }
.iconset_16px { height: 16px; width: 16px; background-color: #87ceeb; margin: 3px;}
.floatLeft  { float:left!important; }

<table>
<tr>
<td>
 <div class="wrapper">
 <div class="actions">
   <div title="Update" class="floatLeft iconset_16px"></div>
   <div title="Settings" class="floatLeft iconset_16px"></div>
   <div title="delete" class="floatLeft iconset_16px"></div>
 </div>

 <div class="gal_name">
   <a title=" Adventure" href="#"> Adventure</a>
 </div>
 <div>   
</td>
</tr>
</table>

Answer 2

不完全知道你想要做什么，但您是否尝试在position: relative上设置<td>然后根据需要调整图标的位置？

http://jsfiddle.net/Z3kpr/1/

Answer 3

div下的actions个元素左侧带有!important标记（由于这个原因不明白），因此忽略了父级的定位。

移除浮子，它们将被正确定位。

这是你修改过的一个的更新小提琴，这样你就可以看到差异了。 http://jsfiddle.net/u9p4u/1/

如何将我的图标放在表格单元格的右上方？

3 个答案: