2

我想<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;
    }
4

1 回答 1

1

你实际上几乎在那里。您只是忘记了 span 是一个内联元素，它不能有一个 floet，宽度和高度应用于它。只需添加display: block到您的 .arrow-toggle 类就可以了。

于 2012-08-08T22:33:30.810 回答