移动端底部导航栏之css滚动

最新推荐文章于 2025-05-29 14:20:56 发布

原创

最新推荐文章于 2025-05-29 14:20:56 发布 · 3.6k 阅读

4 ·

CC 4.0 BY-SA版权

这篇博客介绍了如何使用CSS实现移动端底部导航栏的固定定位和横向滚动效果。通过设置`position: fixed`确保导航栏始终位于屏幕底部，并利用`white-space: nowrap`和`overflow-x: auto`实现内容超出时的横向滚动。每个导航项被包装在`<div class="flex">`中，通过调整其样式来完成布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>移动端导航栏滚动之css</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,
user-scalable=no">
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
        }
        
        /*整体菜单的高度*/
        #Nav
        {
            width: 99%;
            height: 120px;
            position: fixed;
            bottom: 0;
            margin: 0px 0px 10px 0px;
           
        }
        /*一横流的设置*/
        #category-head
        {
            width: 100%;
            white-space: nowrap;
            overflow-x: auto;
           /* float: left; */
        
            cursor: pointer;
        }
        /*每个小div容器的*/
        /*容器分为上下2部分*/
        #category-head .flex
        {
            width: 80px;
            height: 120px;
            display: inline-block;