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 回答