Inline-Block 和 Overflow、兄弟姐妹的关系

liukexina commented 4 years ago

三个 inline-block 元素，其中之一具有 overflow: hidden。页面效果：overflow隐藏的按钮与其他同级的基线不对齐

liukexina commented 4 years ago

css规范： “ inline-block”的基线是正常流中其最后一个线框的基线，除非它没有流入流线框，或者如果其“ overflow”属性具有除“ visible”以外的计算值，则其中基线是下边缘的情况。

liukexina commented 4 years ago

例子：

.search-results span {
  display: inline-block;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

解决：

.search-results span {
  display: inline-block;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: top;
}

添加vertical-aligin: top即可，而绝大多数人遇到类似问题会采用相对定位方式，设置top，这是不被采纳的

liukexina commented 4 years ago

inline-block 和兄弟姐妹之间的间距

<div class="wrapper">
  <a class="button" href="">Save changes</a>
  <a class="button" href="">Cancel</a>
</div>

.button {
  display: inline-block;
  margin-right: 16px;
  /* Other button styles */
}

您已将间距定义为16px，但是如果在浏览器中对其进行测量，则该间距还不止于此。如果您赶时间，可以减少边距并10px在CSS中添加，在浏览器中它将变为16px。发生这种情况是因为按钮是内联元素，而浏览器将它们作为文本字符处理。在文字字符之间，我们有间距。解决如下：

.wrapper {
  display: flex;
  flex-wrap: wrap;
}

.button {
  margin-right: 16px;
  /* Other button styles */
}

liukexina commented 4 years ago

参考：https://ishadeed.com/article/finding-the-root-cause/

chdyiboke / weekly

Inline-Block 和 Overflow、兄弟姐妹的关系 #34