如何创建像谷歌水平滚动菜单？

Question

我们如何制作像Google图片菜单这样的水平菜单？

有人有相同的密码吗？

Answer 1

Flexbox可能是您考虑的一个很好的开始。这是一个很好的例子。您可以根据需要调整样式

HTML

<ul class="flex-container">
   <li class="flex-item">1</li>
   <li class="flex-item">2</li>
   <li class="flex-item">3</li>
   <li class="flex-item">4</li>
   <li class="flex-item">5</li>
   <li class="flex-item">6</li>
</ul>

CSS

.flex-container {
padding: 0;
margin: 0;
list-style: none;

 display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

-webkit-flex-flow: row wrap;
justify-content: space-around;
}

.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin-top: 10px;

line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}

Answer 2

这接近我想要的 但是当我隐藏蓝色滚动条时，它无法通过鼠标滚动，只能在移动设备和其他触摸屏上使用。 如何使用鼠标拖动滚动？

::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: rgba(0,142,136,1.00);
}

div.scrollmenu {
	background: rgba(229,229,225,1.00);
	padding: 5px;
	overflow: scroll;
  	white-space: nowrap;
	border-top: dotted 5px orange;
	border-bottom:solid 2px orange;
	color: orange;
	
}


div.scrollmenu a {
    background: white;
    display: inline-flex;
    color: blueviolet;
	font-size: 20px;
    text-align: justify;
    margin: 5px;
    text-decoration: none;
    width: 200px;
    height: 200px;
    box-shadow: 5px 5px 5px  #ccffff ;
    
}
.product_img{
	width: 200px;
	height: 200px;
}

	<div class="scrollmenu">
		<a href="#home">1</a>
		<a href="#home">2 </a>
		<a href="#home">3</a>
		<a href="#home">4</a>
		<a href="#home">5</a>
		<a href="#home">6</a>
		<a href="#home">7</a>
		<a href="#home">8</a>
		<a href="#home">9</a>
    <a href="#home">10</a>
	</div>

但是当我隐藏蓝色滚动条时，它无法通过鼠标滚动，仅在移动设备和其他触摸屏上有效。