javascript - 在边框的边缘放置一个图标

Question

我是 CSS 新手，正在尝试实现以下效果:

我有一个表格，每个单元格都有短文本行，我想放 1-N 个小图标 在细胞边界的中间。

可能有助于形象化的小草图:

http://img200.imageshack.us/img200/6506/sketcha.jpg

如有任何指导，我将不胜感激。

Answer 1

您最好的选择可能是在框上使用 positon:relative，将图标放在里面，然后使用 position:absolute 放置它们而不占用内容中的空间。像这样:

HTML:

<div id="wrapper">
  <img id="icon1" src="/path/to/image.png" alt="alt text" />
  <img id="icon2" src="/path/to/image.png" alt="alt text" />
</div>

CSS:

  #wrapper { position:relative; z-index:1; }
  #wrapper img { position:absolute; top:-10px; width:20px; height:20px; z-index:10; }
  #icon1 { right:10px; }
  #icon2 { right:40px; }

类似的东西。实际尺寸将基于图标本身的大小和位置，但这样就可以完成工作。