html - 表格行显示的图标图像和文本行不在同一行

Question

我正在尝试制作一个看起来像这样的标签页眉，

但是结果是这样的，

我正在使用三列表格显示，一列用于图像图标，一列用于垂直线，另一列用于文本。我看到的问题是，

1) 应用于中间线的 margin 没有在其两侧添加任何空间。

2) 图标图像和文本未出现在同一级别。图标显示在底部。

3) 不显示应用于外部表格行的左/右边框。

相同的 Plunker 代码是 here

我缺少哪些 css 属性使我的选项卡标题内容相互碰撞而它们之间没有空格!!!

Answer 1

您可能拼错了表 .tab-title-box 的类名。

1. 表格显示不能使用边距，只能使用填充。
2. 您应该对第一个单元格使用 vertical-align: middle 以使图标与最后一个单元格的内容对齐。
3. 边框可以添加到table 和table-cell。将 display: table-row 更改为 display: table 即可。

顺便说一句，如果你想让中间边框更短，你需要在这上面加一行，在下面加一行。