css div设置overflow-x: scroll 横向滚动无效

Question

我给最外层div设置了overflow-x: scroll想要里面的span超出时横向滚动 发现效果依然是上下滚动 请问这个种情况该如何布局
html

<div class="shopCouponBor">
            <span class="shopCouponString">满999减40</span>
            <span class="shopCouponString">满999减40</span>
            <span class="shopCouponString">满999减40</span>
            <span class="shopCouponString">满999减40</span>
            <span class="shopCouponString">满999减40</span>
            <span class="shopCouponString">满999减40</span>
            <span class="shopCouponString">满999减40</span>
</div>

css

.shopCouponBor {
  width: 450px;
  height: 30px;
  float: right;
  overflow-x: scroll;
/*  overflow-x:auto;
  overflow-y:hidden;*/
}
.shopCouponString {
  height: 28px;
  line-height: 28px;
  font-size: 17px;
  color: #FF9F9F;
  border: 1px solid #FF9F9F;
  background: #FFF1F1;
  padding: 0 10px;
  border-radius: 3px;
  margin-right: 15px;
}

Answer 1

overflow-x 和 overflow-y 需要同时设置，或者用 overflow 统一设置。

你那些个 <span> 是行内元素，遇到边界就自动折行了，所以不会出现水平滚动。如果你的目标就是水平滚动的话，给容器元素加 white-space: nowrap。