html - Flexslider 缩略图显示为多行

Question

目前我有一个 flex slider ，如下所示:

我添加的图片越多，缩略图区域显示的行就越多。我希望它只是一排。这是默认行为，但我不确定哪里出错了。这是与 Flex-control-thumbs 关联的 css 代码

.flex-control-thumbs {
    width: 100%; 
    position: absolute; 
    bottom: -40px; 
    text-align: center;
}
.flex-control-thumbs li {
    margin: 0 6px; 
    display: inline-block; 
    zoom: 1; 
    *display: inline;
}
.flex-control-thumbs {
    position: static; 
    overflow: hidden;
}
.flex-control-thumbs li, 
.flex-control-thumbs li:first-child {
    width: 16%; 
    vertical-align: top; 
    margin: 15px 5% 0 0;
}
.flex-control-thumbs img {
    width: 100%; 
    display: block; 
    opacity: .7; 
    cursor: pointer;
}
.flex-control-thumbs img:hover {
    opacity: 1;
}
.flex-control-thumbs .flex-active {
    opacity: 1; 
    cursor: default;
}
.product_slider .flex-active-slide a:hover {
    cursor: -webkit-zoom-in; 
    cursor: -moz-zoom-in;
}

我已经尝试改变上面的几个。设置高度、最大高度等，但对我没有任何作用。这不是我最初写的，我继承了它。

编辑:这是 html:

<ol class="flex-control-nav flex-control-thumbs"><li><img src="//blah.jpg?v=1546474879" class="flex-active" draggable="false"></li></ol>

这部分只是对每张图片重复。

Answer 1

您需要确保您的图像仅显示在一行中。使用 flexbox model要实现这一点，它是一个 css 标准:

有什么新东西？:在 code .flex-control-thumbs 中，我更改/添加了:

显示: flex ； flex-wrap:nowrap;: 所有图像项都放在同一行

overflow-x:auto;:确保在需要时有水平滚动条

code .flex-control-thumbs {
  width: 90%;
  position: absolute;
  bottom: -40px;
  text-align: center;
  display:flex;
  flex-wrap:nowrap;

  border: 1px solid red;
  overflow-x:auto;
  padding-bottom:30px;
}

这是工作示例:

.flex-control-thumbs {
  width: 90%;
  position: absolute;
  bottom: 0px; 
  text-align: center;
  display:flex;
  flex-wrap:nowrap;
  
  border: 1px solid red;
  overflow-x:auto;
  padding-bottom:10px;
}

.flex-control-thumbs li {
  margin: 0 6px;
  display: inline-block;
  zoom: 1;

}


.flex-control-thumbs li,
.flex-control-thumbs li:first-child {
  width: 16%;
  vertical-align: top;
  margin: 15px 5% 0 0;
  min-width:100px;
}

.flex-control-thumbs img {
  width: 100%;
  display: block;
  opacity: .7;
  cursor: pointer;
}

.flex-control-thumbs img:hover {
  opacity: 0.5;
}

.flex-control-thumbs .flex-active {
  opacity: 1;
  cursor: default;
}

.product_slider .flex-active-slide a:hover {
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
}

<ol class="flex-control-nav flex-control-thumbs">
  <li>
    <img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
  </li>
    <li>
    <img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
  </li>
    <li>
    <img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
  </li>
    <li>
    <img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
  </li>
    <li>
    <img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
  </li>
    <li>
    <img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
  </li>
    <li>
    <img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
  </li>
    <li>
    <img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
  </li>
    <li>
    <img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
  </li>
</ol>