Question

我想在<tr class="sub-title">的正确位置添加箭头图像。

如果不在td中添加其他<tr class="sub-title">，这样做的正确方法是什么？

.sub-title td包含背景图片和文字对齐中心。

.sub-title .arrow-toggle包含箭头图片。

<table style="margin-top:-185px;" border="1">
  <tbody>
    <tr> <td> Item 1 </td> </tr>
    <tr class="sub-title">
        <td colspan="5">Sub-Title Here<span class="arrow-toggle"></span></td>
    </tr>
    <tr> <td> Item 2 </td> </tr>
    <tr> <td> Item 2 </td> </tr>
</tbody>
</table>

CSS

.sub-title .arrow-toggle {
        background: url(/public/images/toggle-arrow.png) no-repeat;
        width: 20px;
        height:20px;
        float:right;
    }



    .sub-title td {
        background: url(/public/images/subtitle.gif) repeat-x;
        color:white;
        padding: 5px;
        font-weight: bold;
        border-top:none;
        border-bottom:1px solid #4799bd;
    }

Answer 1

你几乎就在那里。你只是忘了跨度是一个内联元素，它不能有浮动，宽度和高度应用于它。只需将display: block添加到.arrow-toggle类就可以了。

在td中添加另一个图像？

1 个答案: