将图标放在边框的边缘

时间:2009-06-08 20:36:04

标签: javascript css

我是CSS的新手并试图达到以下效果:

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

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

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

我会感谢任何指导。

4 个答案:

答案 0 :(得分:3)

你最好的选择可能是使用positon:相对于盒子,将图标放在里面,并使用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; }

这样的事情。实际尺寸将基于图标本身的大小和位置,但这将完成工作。

答案 1 :(得分:1)

如果你不想绝对定位那么可能会这样做:

<style type="text/css">
    .box {width:200px; height:200px; border:solid 5px #ccc;}
    .icon1, .icon2 { display:block; width:30px; height:15px; background:black; margin-right:10px; margin-top: -10px; float:left;}
</style>


<div class="box">
    <span class="icon1"></span>
    <span class="icon2"></span>
</div>

答案 2 :(得分:0)

这是如何实现这一目标的一个非常基本的例子。这是在没有任何测试的情况下编码的,因此您可能需要根据需要进行调整。

<style type="text/css">

    .buttonCell
    {
        position: relative;
    }

    .button1, .button2
    {
        float: right;
        height: 15px; /* or whatever */
        margin-right: 5px;
        width: 15px; /* or whatever */
        top: -8px; /* or whatever */
    }

    .button1
    {
        background: url(path/to/image.ext) no-repeat top left;
    }

    .button2
    {
        background: url(path/to/image.ext) no-repeat top left;
    }

</style>
<table>
<tbody>
    <tr>
        <td class="buttonCell">
            <div class="button1"></div>
            <div class="button2"></div>
            Text text text
        </td>
    </tr>
</tbody>
</table>

答案 3 :(得分:0)

使用CSS属性位置:相对于TD样式和位置:绝对以及包含内容的DIV上的顶部,左侧和右侧属性。

你应该能够达到预期的效果。