经验教程

css移动端左右滚动导航栏

悠悠楠杉

2021-07-16

0 评论

832 阅读

正在检测是否收录...

07/16

方法一：inline-block和white-space和overflow-y

先让子元素变成内联块，让子元素自动在父容器里面横行排列。

display: inline-block;

再给父容器设置下面两条css样式，让子元素不换行且可以横行滚动。

white-space: nowrap;
overflow-y: auto;

不想让滚动条出现的话，参考上面那种方法里面的隐藏滚动条的方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        ul{
            background: pink;
            white-space: nowrap;
            overflow-y: auto;
        }
        ul li{
            width: 50px;
            height: 30px;
            background: yellow;
            margin:10px;
            list-style: none;
            display: inline-block;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
    </ul>
</body>
</html>

方法二：flex和overflow-y

下面这两条css属性，能够帮助我们实现移动端导航栏，左右滚动，但有滚动条。

display: flex;
overflow-y: auto;  /*overflow-y: scroll/hiddle;也行*/

自定义滚动条的伪对象选择器，实现隐藏滚动条的效果。

ul::-webkit-scrollbar {
    display: none;
}

另外还需要注意一点：flex布局在横向排列时，子元素的宽度会失效，这时，可以给子元素通过下面的属性固定宽度。

flex: 0 0 50px; /* 设置固定宽度 */

知识拓展：
1、flex---是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto ；
2、flex-basis---定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            background: gold;
            display: flex;
            overflow-y: auto;
        }
    
        ul::-webkit-scrollbar {
            display: none;
        }
    
        ul li {
            height: 30px;
            background: tomato;
            margin: 10px;
            list-style: none;        
            flex: 0 0 50px; /* 设置固定宽度 */
        }
        
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
    </ul>
</body>
</html>

经验移动端 css 滚动

朗读