代码

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Demo</title>
    9. </head>
    11. <body>
    12.   <ul class="ul1">
    13.     <li class="li1">1111</li>
    14.     <li class="li1">2222 </li>
    15.     <li class="li1">3333 </li>
    16.     <li class="li1">4444 </li>
    17.     <li class="li1">5555 </li>
    18.   </ul>
    19.   <ul class="ul2">
    20.     <li class="li2">AAAAA</li>
    21.     <li class="li2">BBBBB</li>
    22.     <li class="li2">CCCCC</li>
    23.     <li class="li2">DDDDD</li>
    24.   </ul>
    25.   <ul class="ul3">
    26.     <li class="li3">列表1</li>
    27.     <li class="li3">列表2</li>
    28.     <li class="li3">列表3</li>
    29.     <li class="li3">列表4</li>
    30.     <li class="li3">列表5</li>
    31.   </ul>
    32.   <style type="text/css">
    33.     .ul1 {
    34.       list-style: none;
    35.       margin: 0;
    36.     }
    38.     .li1 {
    39.       display: inline
    40.     }
    42.     .ul2 {
    43.       list-style-type: none;
    44.       margin: 0;
    45.       width: 100%;
    46.     }
    48.     .li2 {
    49.       width: 80px;
    50.       float: left;
    51.     }
    53.     .ul3 {
    54.       display: flex;
    55.       flex-flow: row nowrap;
    56.       justify-content: center;
    57.     }
    59.     .li3 {
    60.       list-style: none;
    61.       border: 2px solid #161EE8FF;
    62.       text-align: center;
    63.       line-height: 30px;
    64.       padding: 10px;
    65.       height: 30px;
    66.       width: 100px;
    67.       margin: 0 10px;
    68.     }
    69.   </style>
    70. </body>
    71. </html>

    效果
    image.png