css 控制横向布局，超出隐藏，滚动

一、第一种方法


< html lang="en" dir="ltr">
  < head >
    < meta charset="utf-8">
    < title >
  < style >
        li{
            list-style: none;
        }
        .box1{
            width: 400px;
            height: 100px;
            overflow-y: hidden;
            overflow-x: scroll;
            /* position: relative; */
        }
       .box2{
            display: flex;
            /* position: absolute; */
         }
         .box2 li{
             width: 50px;
             height: 50px;
             flex-shrink: 0;
             line-height: 50px;
             background: red;
             margin: 15px;
             text-align: center;
             color: #fff;
         }
  

  < body >
    < div class="box1">
        < ul class="box2">
            < li >1
            < li >2
            < li >3
            < li >4
            < li >5
            < li >6
            < li >7
            < li >8
            < li >9
            < li >10
        
     

　

二、第二种方法

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  <style>
        li{
            list-style: none;
        }
        .box1{
            width: 400px;
            height: 100px;
            overflow-y: hidden;
            overflow-x: scroll;
            position: relative;
        }
       .box2{
            display: flex;
            position: absolute;
         }
         .box2 li{
             width: 50px;
             height: 50px;
             line-height: 50px;
             background: red;
             margin: 15px;
             text-align: center;
            color: #fff;
			/* flex-shrink: 0; */
         }
  </style>
</head>
  <body>
    <div class="box1">
        <ul class="box2">
            <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>
        </ul>
    </div> 
  </body>
</html>

　代码中

  第一种可以使用 position: absolute;给box2，其父元素使用相对定位，使得box2的子元素可以横向滚动，改变display:flex布局的自适应；
　　
　　第二种是使用  flex-shrink: 0; 让其display:flex；不在收缩宽度；

posted @ 2018-11-01 16:06  春风得意之时  阅读(8229)  评论(0)  编辑  收藏  举报