使用CSS向下移动一段文本

Question

我想将文本标签向下移动约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标签水平平行显示 - 灰色单元格(顶部一个)和红色单元格(顶部第二个)相交的间隙.由于数字代表左侧栏中的那个点.

所以,如果其他一些技术更好,请告诉我,也许我应该使用DIV会让我有更多的控制权？

Answer 1

如果你想将它向下移动,你需要将它移动正 6px,而不是负6px,并设置顶部属性,而不是底部

position: relative;
top: 6px;

Answer 2

如果我正确阅读此书，则说明您试图跨越两个无法使用的表格单元格之间的边界。您需要合并右列中的前两个单元格，然后将新单元格中的数字合并为rowpan =“ 2”。然后顶部或底部垂直对齐单元格中的文本，并添加一些padding-top，直到其正确对齐为止。