使相邻表格单元格中的项目垂直对齐时出现问题
我在某些表格行上遇到了很大的样式问题。根据此屏幕截图：
蓝色和红色圆圈是表格行中的单元格（高度为 50 像素）。两者的样式都是“vertical-align:top”。电话号码数据（红色圆圈中）实际上是一个以竖线分隔的字符串，我用 HTML 换行符替换了竖线。
在绿色圆圈中，传真标签是“vertical-align:top”，但实际的传真号码列表（也有分隔）是vertical-align:middle。
我想要的是将这些东西整齐地排列起来，顶部的电话号码/传真与标签垂直对齐。我对电话/传真字符串中管道的替换是导致此问题的原因吗？有没有一种方法可以在不更改数据库表/应用程序的情况下获得我想要的东西？
更新：我通过表格单元格上的一些填充来完成此操作。我这么说是因为它看起来大多是排队的，但我有一种沉闷的感觉，这种情况的发生不是因为我想要它，而是由于随机的机会。有一天，当我最需要它看起来正确的时候，它会背叛我。
I'm having a big of a styling problem with some table rows. As per this screenshot:
The blue and red circles are cells in a table row (whose height is 50px). Both are styled with "vertical-align:top" . The phone number data (in the red circle) is actually a pipe-delimited string where I've substituted HTML breaks for the pipes.
In the green circle, the Fax lable is "vertical-align:top", but the actual list of fax numbers (also delimited) are vertical-align:middle.
What I want is for these things to neatly line up, with the top phone number/fax being vertically aligned with the label. Is my substitution of breaks for pipes in the phone/fax strings is the cause of this problem? Is there a way I can get what I want without changes to the database table/app?
Update: I sort of accomplished this via some padding on the table cell. I say sort of because it mostly looks lined up, but I get the sinking feeling this is happening not because I want it to, but due to random chance. And that it will one day betray me when I need it to look right the most.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
尝试以下 CSS：
您可能不应该依赖 valign 之类的东西，它们早已被 CSS 取代了。
Try the following CSS:
You should probably not rely on valign and stuff, that's long-since been replaced with CSS.
我同意 Parrot 的 CSS 实现，您还应该注意，单元格中具有不同的字体和字体大小将使它们看起来不对齐，即使对每个单元应用相同的样式也是如此。如果对齐对于您正在创建的页面的外观/感觉很重要，我会考虑再次分离数据，并使每个电话/传真号码成为自己的标题，标题行“电话”和“传真”具有
colspan =“2”。不，只要没有任何前导
，用。
|就不会对表格的外观产生负面影响。 >|I agree with Parrot's implementation of CSS for this, you should also note that having different fonts and font sizes in the cells will make them appear misaligned, even with the same styling applied to each. If the alignment is important to the look/feel of the page you're creating, I would consider separating the data again and making each phone/fax number it's own heading with a header row "Phone" and "Fax" having
colspan="2".And no, the substitution of
|with<br />will have no negative effect on the look of the tables, so long as there are not any LEADING|s.您称它们为标签（正如它们的语义），您也使用 labels 标签吗？如果是这样，检查它是否应用了一些 css 规则，导致事情变得混乱。
1st（蓝色/红色）如果它们都是 valign:top，这看起来很奇怪。你检查过标签是否应用了一些上边距或填充，或者一些带有vertical-align:middle的CSS规则吗？
第二种情况（绿色），您还需要将它们与顶部对齐..
如果一个在中间，另一个在顶部，你永远无法将它们对齐..
You call them labels (as they semantically are), are you using the labels tag as well ? if so check if it has some css rules applied to it that mess things up.
1st (blue/red) this seems weird if they are both valign:top. have you checked if the label is having some top margin or padding applied on it, or some css rule with vertical-align:middle?
2nd case (green), you will need to align them to the top as well ..
if one is middle and the other top you can never align them ..