css - 将 TD 内的 PRE 块垂直对齐到“顶部”

Question

我正在尝试将 TD 内的 PRE 块的内容垂直对齐到“顶部”。我正在使用 CSS 样式表文件。没运气。但是，我可以更改字体颜色和大小。

table td pre{
color: red;
font: normal 16px Arial;
vertical-align:top; /* Does not work */
}

想法赞赏。

编辑：

table td pre{
   color: red;
   font: normal 16px Arial;
}
table td {
   padding: 5px;
   border: solid 1px white;
   background-color: #edeff1;
   vertical-align: top;
}

Answer 1

垂直对齐是为了td而不是为了pre

table td.preBlock{
vertical-align:top;
}

table td pre{
color: red;
font: normal 16px Arial;
}

然后你可以做

<td class="preBlock">

小提琴

编辑：

即使这样，似乎也对我有用，只需减少margin-top. 看这里

小提琴2

Answer 2

确保您也将前元素上的任何顶部间距设为 0：

td {
    padding-top: 0;
    margin-top: 0;
    vertical-align: top;
}
pre {
    padding-top: 0;
    margin-top: 0;
}

小提琴的例子。