Question

如何使用列表中的左右按钮水平滚动内容？我不需要显示滚动条。

我的一些HTML：

<ul>
 <li>
  <img src="CSS/Imagens/diluente/diluente.png" style="border-bottom: lightgrey 1px solid;" >
  <div class="descricao_img2">Dica 1</div> 
 </li>
</ul>

CSS

ul {
  list-style: none; 
  text-align: center;  
  display: block;
  white-space: nowrap;
  overflow: auto; 
  padding: 10px;
}

li {
  position: relative; 
  display: inline-block;
  min-width: 150px;
  width: 15%;
  background-color: #FFF;
  overflow: hidden;
}

ul li img { 
  float: left;
  cursor: pointer;
  border-top: 1px solid lightgrey;  
  border-bottom: 1px solid lightgrey;  
  border-left: 1px solid lightgrey;
  border-right: 1px solid lightgrey;
  transition: box-shadow 0.1s;
  width: 100%;
  z-index: 1;
}

我已经用Google搜索并尝试了很多脚本，但无法解决“问题”。

Answer 1

试试这个希望有用的

 <ul>
 <li>
  <img src="CSS/Imagens/diluente/diluente.png" style="border-bottom: lightgrey 1px solid;" >
  <div class="descricao_img2">Dica 1</div> 
 </li>
</ul>

<style>
ul {
  list-style: none; 
  text-align: center;  
  display: block;
  overflow: auto; 
  padding: 10px;
}
ul li div {
    float: right;
    width: 48%;
}
li {
  position: relative; 
  display: inline-block;
  min-width: 150px;
  width: 15%;
  background-color: #FFF;
  overflow: hidden;
}

ul li img { 
  float: left;
  cursor: pointer;
  border-top: 1px solid lightgrey;  
  border-bottom: 1px solid lightgrey;  
  border-left: 1px solid lightgrey;
  border-right: 1px solid lightgrey;
  transition: box-shadow 0.1s;
  width: 50%;
  z-index: 1;
}

</style>

使用“向左”和“向右”按钮列出滚动条

1 个答案: