1

我对一些表格行有很大的样式问题。根据此屏幕截图：

替代文字

蓝色和红色圆圈是表格行中的单元格（高度为 50 像素）。两者都采用 "vertical-align:top" 样式。电话号码数据（在红色圆圈中）实际上是一个以竖线分隔的字符串，我用 HTML 中断代替了竖线。

在绿色圆圈中，传真标签是“vertical-align:top”，但传真号码的实际列表（也是分隔的）是vertical-align:middle。

我想要的是让这些东西整齐排列，顶部的电话号码/传真与标签垂直对齐。我替换电话/传真字符串中的管道中断是导致此问题的原因吗？有没有一种方法可以在不更改数据库表/应用程序的情况下获得我想要的东西？

更新：我通过表格单元格上的一些填充来实现这一点。我之所以这么说，是因为它看起来大多是一字排开的，但我有一种下沉的感觉，这不是因为我想要它，而是因为随机的机会。并且有一天它会在我最需要它看起来最正确的时候出卖我。

4

3 回答 3

2

试试下面的 CSS：

table td, table th {
    vertical-align: top;
}

您可能不应该依赖 valign 之类的东西，它们早就被 CSS 取代了。

于 2010-01-13T14:24:23.480 回答
1

我同意 Parrot 对此的 CSS 实现，您还应该注意，在单元格中使用不同的字体和字体大小会使它们看起来不对齐，即使每个样式都应用了相同的样式。如果对齐对您正在创建的页面的外观/感觉很重要，我会考虑再次分离数据并将每个电话/传真号码设为自己的标题，标题行“电话”和“传真”具有colspan="2".

*------------------------*
| Phone:                 |
|------------------------|
|   Back: | xxx-xxx-xxxx |
|------------------------|
|  Front: | xxx-xxx-xxxx |
|------------------------|
| Fax:                   |
... etc.

不，只要没有任何 LEADING ，替换|with不会对表格的外观产生负面影响。<br />|

于 2010-01-13T14:31:29.610 回答
0

您称它们为标签（因为它们在语义上是），您是否也在使用标签标签？如果是这样，请检查它是否应用了一些 css 规则，从而搞砸了。

第一个（蓝色/红色）如果它们都是 valign:top，这似乎很奇怪。您是否检查过标签上是否应用了一些上边距或填充，或者一些带有垂直对齐：中间的 css 规则？

第二种情况（绿色），您还需要将它们与顶部对齐..如果一个在中间而另一个在顶部，您将永远无法对齐它们..

于 2010-01-13T14:28:32.410 回答