为何内层div垂直排列而非水平？React CSS布局问题求助

你遇到的内层div换行问题，核心原因是同时给内层元素设置了float: left和display: inline-block——float属性会让元素脱离正常的文本排版流，直接忽略外层容器的white-space: nowrap配置，当外层宽度不足以容纳所有元素时，就会自动换行。

修复步骤： #

• 移除所有内层div的float: left属性，只保留display: inline-block，这样外层的white-space: nowrap才能发挥作用，让内层元素保持水平排列。
• 外层div的display: inline-block可以去掉，因为绝对定位的元素默认是块级行为，这个属性在这里没有实际作用。

修改后的代码： #

<div style={{
  position:'absolute', 
  width:'1200px', 
  height:'80px',
  background:'#cc5',
  top:'270px',
  left:'100px',
  whiteSpace: 'nowrap',
  overflowX:'auto'
}}>
  <div style={{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px'}}></div>
  <div style={{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px'}}></div>
  <div style={{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px'}}></div>
  <div style={{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px'}}></div>
  <div style={{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px'}}></div>
  <div style={{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px'}}></div>
  <div style={{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px'}}></div>
  <div style={{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px'}}></div>
  <div style={{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px'}}></div>
  <div style={{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px'}}></div>
  <div style={{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px'}}></div>
  <div style={{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px'}}></div>
  <div style={{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px'}}></div>
  <div style={{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px'}}></div>
</div>

这样修改后，内层div会在外层容器内水平排列，当总宽度超过1200px时，就会触发X轴的滚动条，完全符合你的需求。

内容的提问来源于stack exchange，提问作者J.Doe