设置overflow:hiden行内元素会发生偏移的现象

父级元素包含几个行内元素

<div id="box">
<p>
<span>按钮</span>
<span>测试文字文字文字测试文字文字文字</span>
<span>看这里</span>
</p>
</div>

 

#box p{
        width: 800px;
        font-size: 30px;
}
      #box p span{
        display: inline-block;
        box-sizing: border-box;
/*vertical-align:top/bottom*/ } #box p span:nth-child(2){ padding-left: 10px; width: 350px; /* overflow: hidden; white-space: nowrap; text-overflow: ellipsis;*/ }

正常显示,且在同一行;当设置overflow:hidden之后,元素出现不对齐的情况

https://www.houdianzi.com/ vi设计公司

原因:

行内元素的默认对齐方式是基线对齐即(vertical-align:baseline),设置设置overflow不为visible之后改变了他的默认对齐方式为下边距边缘;其他行内元素依然还是基线对齐就会出现下沉的视觉效果

 

解决方法:

1、重新设置所有行内元素的对齐方式为vertical-align:top或者bottom

2、设置所有的行内元素的overflow不为visible

3、设置flex布局

说明:vertical-align属性针对行内元素和表格属性元素使用,在块级元素中不起作用

posted @ 2021-08-15 16:40  浅笑·  阅读(100)  评论(0编辑  收藏  举报