使相邻表格单元格中的项目垂直对齐时出现问题答案

【问题标题】：Problem getting items in adjacent table cells to align vertically使相邻表格单元格中的项目垂直对齐时出现问题
【发布时间】：2019-06-02 03:05:29
【问题描述】：

我遇到了一些表格行的样式问题。按照这个截图：

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

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

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

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

【问题讨论】：

标签： html css vertical-alignment

【解决方案1】：

试试下面的 CSS：

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

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

【讨论】：

我弄错了样式是如何完成的；它是 css 驱动的。
我是个白痴，只是忘记了他在几秒钟前半分钟前发表了评论。

【解决方案2】：

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

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

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

【讨论】：

我错了垂直对齐样式是如何完成的，fwiw。
是的，我有一种感觉，我会后悔没有单独的电话字段。问题是，我无法说出将列出多少电话/传真号码（我认为在某些情况下可能会超过四个）。也不会有什么标签。我试图捕捉旧应用程序的外观。我可能仍会更改此设置并转到单独的字段。
如果您在后台使用任何类型的服务器端语言，您可以生成每一行并在它有值时适当地标记它。否则，如果该字段不存在任何值，您只需将该行完全排除在外。通过这种方式，您可以根据需要动态声明行，并且几乎不用担心样式问题。

【解决方案3】：

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

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

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

【讨论】：