Open liukexina opened 4 years ago
css规范: “ inline-block”的基线是正常流中其最后一个线框的基线,除非它没有流入流线框,或者如果其“ overflow”属性具有除“ visible”以外的计算值,则其中基线是下边缘的情况。
例子:
.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,这是不被采纳的
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 */
}
三个 inline-block 元素, 其中之一具有 overflow: hidden。 页面效果:overflow隐藏的按钮与其他同级的基线不对齐