溢出-x不起作用 [英] Overflow-x not working

问题描述

我正在尝试为我的画廊实现一个滑块。
现在，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不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！