本文介绍了溢出-x不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试为我的画廊实现一个滑块。
现在,css有一个问题,其中overflow-x无法正常工作。
(我想要一个水平滑块,而没有垂直滚动)

I am trying to implement a slider for my gallery.Right now,the css has an issue where the overflow-x doesnt work properly.(I want a horizontal slider and no vertical scroll)

这是

请看看。

.testimg{
    height: 100%;
    width: 100%;
}
#testDiv{
    width: 400px;
    overflow: auto;
    float: left;
    overflow-y:hidden;
    border:1px solid black;
}
.testimgdiv{
    width: 120px;
    height: 100px;
    float: left;
}


推荐答案

元素,您已经将它们从文档流中删除了,并且不会以父级的宽度进行计算。您必须在项目上使用 display:inline-block 而不是float的组合,然后使用 white-space:nowrap

Once you've floated the elements, you've taken them out the document flow and it won't be calculated in the parent's width. You have to use a combination of display: inline-block on the items instead of float, and then use white-space: nowrap on the parent.

#testDiv{
  width: 400px;
  overflow-x: auto;
  border:1px solid black;
  white-space: nowrap;
  font-size: 0;
}
.testimgdiv{
  width: 120px;
  height: 100px;
  display: inline-block;
}

Fiddle

注意:我使用的是 font -size:0 可使项目彼此相邻显示。

Note: I'm using font-size: 0 to make the items appear right next to each other.

更新

由于这篇文章相当老,可能需要注意的是,使用flexbox可以用更少的代码完成此操作(取决于所需的浏览器支持级别):

As this post is quite old, it's probably worth noting that this can be done with less code using flexbox (depending on the browser support level required):

#testDiv{
  width: 400px;
  display: flex;
  overflow-x: auto;
}

.testimgdiv{
  width: 120px;
  height: 100px;
  flex: 0 0 auto;
}

这篇关于溢出-x不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-23 20:38