溢出x轴不起作用

Question

我正在尝试隐藏父包装器中的内部嵌套元素，以便包装器可以水平滚动以显示隐藏的元素。这是JSbin。

.wrapper {
  position: relative;
  width: 150px;
  height: 20px;
  overflow-x: scroll;
  overflow-y: hidden;
  border: thin dotted;
}
span {
  margin: 0 10px;
  display: inline-block;
}

<section class="wrapper">
  <span>One</span>
  <span>Two</span>
  <span>Three</span>
  <span>Four</span>
</section>

Answer 1

您只需将template="*" 添加到white-space: nowrap

即可

＆＃13;

＆＃13;

.wrapper

＆＃13;

.wrapper {
  width: 150px;
  overflow-x: scroll;
  border: thin dotted;
  white-space: nowrap;
}
span {
  margin: 0 10px;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试overflow-x: auto;而不是overflow-x: scroll;