zoukankan      html  css  js  c++  java
  • css3 横向拖拽

    css:

      .tab{
             list-style-type: none;
             display:-webkit-box;
             display:-webkit-flex;
             display:-ms-flexbox;
             display:flex;
             -webkit-flex-wrap:nowrap;
             -ms-flex-wrap:nowrap;
             flex-wrap:nowrap;
             -webkit-box-pack:justify;
             -webkit-justify-content:space-between;
             -ms-flex-pack:justify;
             justify-content:space-between;
             background:#ccc;
             padding:0;
             overflow:auto;}
        .tab-item{
            -webkit-box-flex:1;
            -webkit-flex:1 0 auto;
            -ms-flex:1 0 auto;
            flex:1 0 auto;
            color:white;
            padding:0 0.5rem;
        }

    html:

     <ul class="tab margin-top5">
            <li class="tab-item">篮球</li>
            <li class="tab-item">篮球</li>
            <li class="tab-item">篮球</li>
            <li class="tab-item">篮球</li>
            <li class="tab-item">篮球</li>
            <li class="tab-item">篮球</li>
            <li class="tab-item">篮球</li>
            <li class="tab-item">篮球</li>
            <li class="tab-item">篮球</li>
            <li class="tab-item">篮球</li>
            <li class="tab-item">篮球</li>
        </ul>

  • 相关阅读:
    前端性能优化——写给网页设计师和前端工程师看的
    V8引擎——详解
    Perl_实用报表提取语言
    qs.stringify和JSON.stringify()
    js之history
    js考察this,作用域链和闭包
    css table之合并单元格
    js手机浏览器浏览WebApp弹出的键盘遮盖住文本框的解决办法
    windows 杀进程
    axios库的使用
  • 原文地址:https://www.cnblogs.com/jhuang-com/p/8297816.html
Copyright © 2011-2022 走看看