摘要 今天小编跟大家讲解下有关设置overflow:hiden行内元素会发生偏移的现象 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关设置

今天小编跟大家讲解下有关设置overflow:hiden行内元素会发生偏移的现象 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关设置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之后 元素出现不对齐的情况

原因：

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

解决方法：

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

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

3、设置flex布局

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

来源：爱蒂网