[分享]css出现横向滚动条却不响应

网页开发中，经常会遇到CSS出现横向滚动条却不响应的问题，这是一个比较常见的问题，下面就详细介绍下如何解决。body{ width:100; overflowx:hidden; } .containe...

网页开发中，经常会遇到CSS出现横向滚动条却不响应的问题，这是一个比较常见的问题，下面就详细介绍下如何解决。

body{
  width:100%;
  overflow-x:hidden;
}
.container{
  width:1200px;
  overflow-x:auto;
  white-space:nowrap;
}
.item{
  display:inline-block;
  width:300px;
  height:200px;
} 

以上是一个简单的代码示例，包含一个容器container，以及多个块级元素item。我们的目标是要让container出现横向滚动条，并且item排成一行，不换行。最开始，我们可能会直接使用CSS属性overflow-x:auto来实现横向滚动条，但是如果我们像上述示例一样设置好之后却发现横向滚动条无法正常工作。

这是因为在实际的使用中，我们可能会忘记给container设置white-space:nowrap属性，这个属性会让元素强制不换行，从而实现各个子元素排在同一行的效果。另外，为了保证元素的宽度在自适应布局下不会超出父元素的范围，我们需要对body标签设置width:100%和overflow-x:hidden属性。

同时，为了让子元素item排在同一行，我们需要将它们的display属性设置为inline-block。

综上所述，为了保证CSS出现横向滚动条正常工作，我们需要对父元素设置overflow-x:auto和white-space:nowrap属性，对子元素设置display:inline-block属性，以及对body设置width:100%和overflow-x:hidden属性。这样，就可以实现一个完美的横向滚动条效果。