CSS中可以使用overflow-x属性来创建水平滚动的效果。下面是一个示例代码:
html部分:- <div class="menu">
- <ul>
- <li><a href="https://www.tuyuanma.com/id/2/1">独家资源</a></li>
- <li><a href="https://www.tuyuanma.com/daohang/">站长导航</a></li>
- <li><a href="https://www.tuyuanma.com/news/">技术分享</a></li>
- <!-- 更多菜单项... -->
- </ul>
- </div>
复制代码 CSS部分:- .menu {
- width: 400px; /* 设置容器宽度 */
- overflow-x: auto; /* 开启水平溢出自动隐藏功能 */
- }
-
- .menu ul {
- list-style-type: none; /* 去除默认列表样式 */
- padding: 0; /* 清空内边距 */
- margin: 0; /* 清空外边距 */
- white-space: nowrap; /* 不换行显示所有元素 */
- }
-
- .menu li {
- display: inline-block; /* 将每个菜单项放在同一行上 */
- margin-right: 5px; /* 添加间距 */
- }
复制代码 这段代码会创建一个具有左右滑动效果的菜单。当菜单项超过容器宽度时,就会出现水平滚动条供用户进行浏览。 |