css 移动web li 左右两列布局

雨点打透心脏的1/2处 2022-04-23 15:42 393阅读 0赞 
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6.     <style>
  7.         html,body,section{
  8.         width: 100%;
  9.         height: 100%;
  10.         margin: 0;
  11.         padding: 0;
  12.     }
  13.     ul,li{
  14.         list-style: none;
  15.         margin: 0;
  16.         padding: 0;
  17.         width: 100%;
  18.     }
  19.     .box{
  20.         display: flex;
  21.         flex-direction: row;
  22.         flex-wrap: wrap;
  23.         justify-content:space-between;
  24.         background: darkseagreen;
  25.     }
  26.     .box li{
  27.         width: calc(50% - 5px);
  28.         height: 100px;
  29.         background:mistyrose;
  30.         margin: 5px 0;
  31.     }
  32.     </style>
  33. <body>
  34.         <section>
  35.         <ul class="box">
  36.             <li>1</li>
  37.             <li>2</li>
  38.             <li>3</li>
  39.             <li>4</li>
  40.             <li>5</li>
  41.         </ul>
  42.     </section>
  43. </body>
  44. </html>

发表评论

表情：
评论列表 （有 0 条评论，393人围观）

还没有评论，来说两句吧...

相关阅读