Question

这是我的HTML。样式部分有点不同，因为我在React中写，但我猜我的问题是因为css和html而出现的。为什么内部div出现在较低的行中。我想让它在x轴上滚动显示在外部div的水平内部。我已经给了像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>

Answer 1

因为您使用的是样式：

display:'inline-block'

你的代码块也有问题，我修复了下面的两个div：

<div style="position:absolute; width:1200px; height:80px;background:#cc5;top:270px;left:100px;whiteSpace: nowrap;display:block;'overflow-x':auto">
<div style="position:absolute; width:1200px; height:80px;background:#cc5;top:270px;left:100px;whiteSpace: nowrap;display:block;'overflow-x':auto">

Answer 2

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

<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

为什么divs垂直而不是水平？

2 个答案: