Html 使用 CSS 向下移动一段文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1515873/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
shifting a piece of text down using CSS
提问by Ankur
I want to shift a text label down by about 6px I am attaching the style:
我想将文本标签向下移动大约 6px 我正在附加样式：
.price-label{
font-family:Arial, Helvetica, sans-serif;
font-size:small;
position:relative;
bottom:-6px;
vertical-align:bottom;
}
The HTML is:
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> </td>
<td class="price-label">54.67</td>
</tr>
<tr>
<td width="28" bgcolor="#CCCCCC"> </td>
<td height="45"> </td>
</tr>
<tr>
<td width="28" bgcolor="#CC3300"> </td>
<td height="112"> </td>
</tr>
<tr>
<td width="28" bgcolor="#CCCCCC"> </td>
<td height="22"> </td>
</tr>
</table>
Visually I want the 54.67 label to appear horizontally parallel - to the gap where the grey cell (top one) and red cell (second from top) meet. As the number represents that point in the bar to the left.
从视觉上看，我希望 54.67 标签与灰色单元格（顶部一个）和红色单元格（顶部第二个）相交的间隙水平平行。由于数字代表左侧栏中的那个点。
So if some other technqiue is better, please let me know, maybe I should be using DIVs would that give me more control?
因此，如果其他一些技术更好，请告诉我，也许我应该使用 DIV，这会给我更多控制权吗？
采纳答案by jon_brockman
If I'm reading this correctly, then you're trying to straddle the border between two table cells which won't work. You'll need to consolidate the first two cells in the right column and then rowspan="2" the new cell with the number in it. Then top or bottom vertically align the text in the cell and add some padding-top until it's aligned properly.
如果我没看错，那么您正试图跨越两个不起作用的表格单元格之间的边界。您需要合并右列中的前两个单元格，然后将 rowspan="2" 包含数字的新单元格合并。然后顶部或底部垂直对齐单元格中的文本并添加一些 padding-top 直到它正确对齐。
回答by David
If you want to shift it down, you need to shift it a positive6px, not a negative 6px, and set the topproperty, not bottom
如果要向下移动，则需要将其移动正6px，而不是负 6px，并设置top属性，而不是底部
position: relative;
top: 6px;
回答by eozzy
Label is an inline element, margin/padding would only work when you make it a block (inline-block, block or float). Try this:
标签是内联元素，边距/填充仅在您将其设为块（内联块、块或浮动）时才有效。尝试这个：
.price-label {
padding:6px 0 0;
display: inline-block;
display: -moz-inline-box;
-moz-box-orient: vertical;
vertical-align: top;
zoom: 1;
*display: inline; }
回答by Dominic Rodger
You might be better off using:
您最好使用：
.price-label { margin-top: 6px; }
It's difficult to know more without some context of what else is around that table cell though.
但是，如果不了解该表格单元格周围的其他内容，则很难了解更多信息。
回答by annakata
Use padding-top:6px;instead of positioning, which can get very messy with relation to sibling elements etc.. and has other-side effects.
使用padding-top:6px;而不是定位，这可能会导致与兄弟元素等的关系变得非常混乱，并且具有其他副作用。
