Question

inline-block元素使用overflow: hidden定位自己，因此它们的下边距是基线。来自http://www.w3.org/TR/CSS2/visudet.html#leading：

＆＃39;内联块的基线＆＃39;是它的基线正常流程中的最后一行框，除非它没有流入式线盒或如果其溢出＆＃39;物业有一个除了＆＃39; visible＆＃39;之外的计算值，在这种情况下基线是底部边缘边缘。

在实践中，这意味着这些元素意外地向上移动;例如，在<td>内，元素不会垂直居中。一个更简单的例子：

＆＃13;

div {
  border: 1px solid red;
  text-decoration: underline;
}
.ib {
  display: inline-block;
}
.h {
  overflow: hidden;
}

＆＃13;

<div>
  <div class="ib">Visible</div>ABgjh</div><br>
<div>
  <div class="ib h">Hidden</div>ABgjh</div>

＆＃13;

div与overflow: hidden并不与其周围的行共享相同的基线。

我正在寻找一种简单的方法，使div对齐，就好像它遵循inline-block元素的正常规则一样。基本上我想写一个自定义元素＆＃34;只是工作＆＃34;其消费者是否应用vertical-align样式，或将其置于<td>等内

This table has an example我希望元素在垂直方向上居中，而是将其自身向上推（并将其余部分向下）。

This fiddle has more examples显示当一个元素为display: inline-block; overflow: hidden时，不同的vertical-align配对如何出乎意料地行为。

要明确的是，这个问题是询问<div style="overflow: hidden">是否可以被包装成可以被视为常规inline-block元素，智能定位，不需要JS或基于字体像素调整。我希望能够将样式应用于最终组件，以便根据需要定位或对齐它，就像它是常规inline-block元素一样。

Answer 1

我不确定您希望支持哪些浏览器，但如果您使用DIV包裹display: flex;，则不会获得该垂直偏移量。你可以在这里看到它：

＆＃13;

    div {
      border: 1px solid red;
      text-decoration: underline;
    }
    .ib {
      display: inline-block;
    }
    .h {
      overflow: hidden;
    }
    .flex {
      display: flex;
    }

＆＃13;

<div>
  <div class="ib">Visible</div>
  ABgjh
</div>
<div class="flex">
  <div class="ib h">Hidden</div>
  ABgjh
</div>

＆＃13;

由于缺乏浏览器支持，我通常不会使用flexbox，但这可能是您正在寻找的简单解决方案。希望有所帮助。

如何轻松地将元素与＆＃34; display：inline-block＆＃34;和＆＃34;溢出：隐藏＆＃34;？

1 个答案: