html – 使用CSS向下移动一段文本

我想把一个文本标签下移大约6px我附加了风格：

.price-label{
    font-family:Arial,Helvetica,sans-serif;
    font-size:small;
    position:relative;
    bottom:-6px;
    vertical-align:bottom;
}

HTML是：

<table border="0" cellspacing="1" cellpadding="0">
    <tr>
        <td height="45" colspan="2" align="center"><p><span class="text">Name</span><span class="name-label"></span></p></td>
        </tr>
            <tr>
                    <td>&nbsp;</td>
                    <td class="price-label">54.67</td>
                  </tr>
                  <tr>
                    <td width="28" bgcolor="#CCCCCC">&nbsp;</td>
                    <td height="45">&nbsp;</td>
                  </tr>
                  <tr>
                    <td width="28" bgcolor="#CC3300">&nbsp;</td>
                    <td height="112">&nbsp;</td>
                  </tr>
                  <tr>
                    <td width="28" bgcolor="#CCCCCC">&nbsp;</td>
                    <td height="22">&nbsp;</td>
                  </tr>
                </table>

视觉上我想要54.67标签水平平行地出现 – 灰色单元格(上一个)和红色单元格(第二个从顶部)到达的间隙.由于数字表示在左边的栏中的那一点.

所以如果其他的技术更好,请让我知道,也许我应该使用DIVs会给我更多的控制权？

解决方法

如果我正在正确阅读,那么你试图跨越两个不能正常工作的表格单元格之间的边界.您将需要合并右列中的前两个单元格,然后将rowspan =“2”更新为带有数字的新单元格.然后顶部或底部垂直对齐单元格中的文本,并添加一些padding-top,直到它正确对齐.