html - DIV适合父级的宽度内容

Question

我有一个带有 slider 的对象列表 - 当点击向右箭头时，left 参数动画为 -500px。

HTML

<div id="container">
   <div id="list">
      <div class="elem"></div>
      <div class="elem"></div>
      <div class="elem"></div>
      <div class="elem"></div>
      // more ...
   </div>
</div>

样式

#container {
   width: 500px;
   overflow: hidden;
}
#list {
   position: relative;
   left: 0px;
}
.item {
   float: left;
}

我希望 #list 适合它的内容 - 现在它将溢出的子项移动到下一行。设置 display: inline-block 可以工作，但没有固定宽度的父项。

我怎样才能做到这一点？

Answer 1

你应该使用 white-space: nowrap 到 #container div。

#container {
  width: 500px;
  overflow: hidden;
  white-space: nowrap;
}
#list {
  position: relative;
  left: 0px;
}
.item {
  float: left;
}
.elem {
  background: orange;
  width: 200px;
  height: 200px;
  border: 1px solid #000000;
  display: inline-block;
}

<div id="container">
  <div id="list">
    <div class="elem"></div>
    <div class="elem"></div>
    <div class="elem"></div>
    <div class="elem"></div>
    // more ...
  </div>
</div>

引用:MDN - white-space