Question

我有一个带滑块的对象列表 - 当点击右箭头时，左参数动画为-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

如果滑块是由您自定义/创建的，并且您知道哪个幻灯片是活动幻灯片，则可以获取该项目的宽度并使用javascript / jquery将其设置为#list。

否则，如果下载滑块，您可以尝试查看活动类是否具有活动类，然后使用上述相同方法获取宽度，获取活动项的宽度并将其设置为父级' ＃list'

Answer 2

设置这样的保证金：

#list {
   margin:0px auto;
   width: 80%;
}

这会将列表集中在容器中。

Answer 3

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

参考：MDN - white-space

DIV适合父级的宽度内容

3 个答案: