时间戳

首页 > 解决方案 > 为什么 div 垂直而不是水平显示？

html - 为什么 div 垂直而不是水平显示？

问题描述

这是我的html。样式部分有点不同，因为我在 React 中编写，但否则我猜我的问题是由于 css 和 html 而发生的。为什么内部 div 出现在下排。我希望它水平显示在外部 div 内，并在 x 轴上滚动。我已经给出了诸如 white-space:nowrap 之类的属性。

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

            <div style={{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px',float:'left'}}></div>
            <div style={{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px',float:'left'}}></div>


            <div style={{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px',float:'left'}}></div>
        </div>

标签： htmlcssreactjs

解决方案

您的代码需要进行一些修改，如下所示：

<div style="position: absolute; width: 1200px; height: 80px;background: #cc5;top: 270px;left: 100px;white-space: nowrap;display: inline-block;overflow-x: auto;">
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
</div>

由于您具有内联样式，因此您可以将它们移动到 css 文件中。另外，overflowX需要改成overflow-x

推荐阅读