zoukankan      html  css  js  c++  java
  • 实现不定个数的li等宽自适应ul

    需求

    想要实现如图的效果,li宽度相等,并且自适应ul的宽度。
    li个数不是固定的,图中一行为9个li,当屏幕宽度变小,可能会8个或更少,但在屏幕宽度变化的过程中,要保持li的宽度相等并且始终充满ul的宽度。

    解决

    使用了媒体查询来实现效果,上代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        ul{
          padding: 0;
          display: flex;
          flex-wrap: wrap;
          overflow: hidden;
          border: 1px solid #000;
        }
        ul li {
          background: #eee;
          min- 80px;
          font-size: 16px;
          list-style: none;
          text-align: center;
          margin-bottom: 10px;
          line-height: 30px;
        }
        @media screen and (max- 768px) {
          ul li{
             calc(100% / 7 - 10px);
            margin-right:calc(70px / 6);
          }
          ul li:nth-child(7n) {
            margin-right: 0;
          }
        }
        @media screen and (min- 768px) and (max- 992px){
          ul li{
             calc(100% / 8 - 10px);
            margin-right:calc(80px / 7);
          }
          ul li:nth-child(8n) {
            margin-right: 0;
          }
        }
        @media screen and (min- 992px) and (max- 1200px){
          ul li{
             calc(100% / 9 - 10px);
            margin-right:calc(90px / 8);
          }
          ul li:nth-child(9n) {
            margin-right: 0;
          }
        }
        @media screen and (min- 1200px) {
          ul li{
             calc(100% / 10 - 10px);
            margin-right:calc(100px / 9);
          }
          ul li:nth-child(10n) {
            margin-right: 0;
          }
        }
      </style>
    </head>
    <body>
      <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
        <li>item6</li>
        <li>item7</li>
        <li>item8</li>
        <li>item9</li>
        <li>item10</li>
        <li>item11</li>
        <li>item12</li>
        <li>item13</li>
        <li>item14</li>
        <li>item15</li>
      </ul>
    </body>
    </html>
    

    这个方案有些繁琐,暂时满足了当前的需求,但如果有更好的解决方案,希望能提供思路~~

  • 相关阅读:
    《转》12个Sublime Text使用技巧
    Sublime Text 3 快捷键总结
    IIS发布的网站常见的问题汇总
    sublime text 3 安装卸载插件和取消启动检查更新
    sublime text 3 环境变量的配置、安装Package Control、汉化和注册
    github贡献开源项目
    github团队协作
    github desktop的使用
    GitHub网站操作
    HTML中的SVG
  • 原文地址:https://www.cnblogs.com/ZerlinM/p/13534845.html
Copyright © 2011-2022 走看看