Question

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

但它就像这样，

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

1）申请中间线的margin不会在其侧面添加任何空间。

2）图标图像和文本没有出现在同一级别上。图标显示在底部。

3）未显示应用于外表行的左/右边框。

相同的Plunker代码是here

我缺少哪些css属性，使我的标题页内容相互碰撞，两者之间没有空格!!!

Answer 1

你的意思是这样吗？

＆＃13;

.table-title-box > * {
  padding : 10px 20px;
}

.image{
  background-image: url('http://i.imgur.com/qsBdQzn.png');
  width: 40px;
  height: 40px;
  display: inline-block;
  background-repeat: no-repeat;
}

.vertical {
  position: relative;
  height: 70px;
  border-left: 1px solid #f2f2f2;
  border-right: 1px solid #c8c9ca;
}

＆＃13;

<!DOCTYPE html>
<html>
  <body>
    <div class="tab-title-box" style="display:table;border-right:2px double black;border-left:2px double black;">
      <span class="tabIcon" style="display:table-cell;vertical-align:middle;;padding:0 10px"><em class="image"></em></span>
      <span class="vertical" style="display:table-cell;margin-right:20px;"></span>
      <div class="row" style="vertical-align: middle;display:table-cell;vertical-align:middle;padding:0 10px">
        <div class="tab-title-text" style='color:#ea7600;'>Overview</div>
        <div class="tab-info">All is well</div>
      </div>
    </div>
  </body>
</html>

＆＃13;

https://plnkr.co/edit/hPoNm1NYHSEDQpYckfSM?p=preview

Answer 2

有可能拼错了表格.tab-title-box的班级名称。

您不能使用保证金进行表格显示，只能使用填充。
您应该使用vertical-align: middle作为第一个单元格，使图标与最后一个单元格的内容保持一致。
可以将边框添加到table和table-cell。将display: table-row更改为display: table即可。

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

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

2 个答案: