为什么white-space: nowrap不生效？

Question

知乎中间这些分类可以向右拖动，上网查找如何把元素排列在一行内，得到的答案是white-space: no-wrap;

我的代码如下：

  <div class="sorts clearfix">
    <span class="chosen">全站</span>
    <span>科学</span>
    <span>数码</span>
    <span>体育</span>
    <span>时尚</span>
    <span>影视</span>
    <span>校园</span>
    <span>汽车</span>
    <span>时事</span>
    <span>国际</span>
    <span>时事</span>
    <span>国际</span>
  </div>

html{
  font-size: 13.33vw; /* 1rem == 100px */
}
.clearfix::after,
.clearfix::before {
  content: '';
  display: table;
  clear: both;
}
.sorts{
  padding: 0.12rem 0.16rem 0.12rem 0.16rem;
  white-space: nowrap; /* 使得元素*/
}
.sorts > span{
  float: left;
  width: 0.26rem;
  height: 0.168rem;
  padding: 0.05rem 0.16rem 0.05rem 0.16rem;
  margin-left: 0.12rem;
  background-color: #F6F6F6;
  border-radius: 5px;
  font-size: 0.13rem;
  color: #808080;
}
span.chosen{
  color: #2C67FF;
  background-color: #ECF3FF;
}

现在span元素没有如预期一样排列在一行，请问要修改哪里呢？

Answer 1

你只要把.sorts > span中的float: left;去掉就可以了。

Answer 2

.sorts{
  width:auto;
  overflow-x:auto;
}