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，并设置< strong>顶部属性，而不是底部

position: relative;
top: 6px;

Answer 2

如果我正确地读到这个，那么你正试图跨越两个表单元格之间的边界，这将无效。您需要合并右列中的前两个单元格，然后在rowspan =“2”中包含其中包含数字的新单元格。然后在顶部或底部垂直对齐单元格中的文本并添加一些填充顶部，直到它正确对齐。

Answer 3

您可能最好使用：

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

如果没有关于该表格单元格的其他内容的背景，很难知道更多。

Answer 4

Label是一个内联元素，margin / padding仅在你将它作为一个块（内联块，块或浮点数）时才有效。试试这个：

.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 5

使用padding-top:6px;代替定位，与兄弟元素等相关可能会变得非常混乱。并且具有其他副作用。

使用CSS向下移动一段文本

5 个答案: