使用CSS向下移動一段文字

Question

我想將文字標簽下移約6像素，然后附加樣式：

.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

如果你想轉移下來 ，你需要轉移是一個積極 6個像素，而不是負6像素，並設置top屬性，而不是底部

position: relative;
top: 6px;

Answer 2

如果我正確地讀這篇文章，那么你想跨越這將不起作用雙表格單元格之間的邊界。 您需要合並右列中的前兩個單元格，然后將新單元格中的數字合並為rowpan =“ 2”。 然后，頂部或底部垂直對齊單元格中的文本，並添加一些填充頂，直到它的正確對齊。

Answer 3

Label是一個內聯元素，僅當您將其設為塊（inline-block，block或float）時，邊距/填充才起作用。 嘗試這個：

.price-label {
        padding:6px 0 0;
    display: inline-block;
    display: -moz-inline-box;
    -moz-box-orient: vertical;
    vertical-align: top;
    zoom: 1;
    *display: inline; }

Answer 4

使用以下方法可能會更好：

.price-label { margin-top: 6px; }

但是，如果不了解該表單元格周圍的其他內容，就很難了解更多信息。

Answer 5

使用padding-top:6px; 而不是定位，這可能會使同級元素等的關系變得非常混亂。並具有其他副作用。