【CSS】1.实现ul两列分布

最新推荐文章于 2024-05-07 15:39:54 发布

Bee.Bee.

最新推荐文章于 2024-05-07 15:39:54 发布

阅读量265

点赞数

分类专栏： CSS 文章标签： css html 前端

本文链接：https://blog.csdn.net/weixin_49015558/article/details/130952994

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1. float实现

2. flex实现

1. float实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .demo1 {
        width: 300px;
        background: pink;
        float: left;
      }
      .demo1-li {
        width: 50%;
        float: left;
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="demo1">
      <ul>
        <li class="demo1-li"><a href="#">111</a></li>
        <li class="demo1-li"><a href="#">222</a></li>
        <li class="demo1-li"><a href="#">333</a></li>
        <li class="demo1-li"><a href="#">444</a></li>
        <li class="demo1-li"><a href="#">555</a></li>
      </ul>
    </div>
  </body>
</html>

2. flex实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .demo2 {
        width: 300px;
        background: skyblue;
      }
      .demo2-ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }
      .demo2-li {
        width: calc(50% - 10px);
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="demo2">
      <ul class="demo2-ul">
        <li class="demo2-li"><a href="#">111</a></li>
        <li class="demo2-li"><a href="#">222</a></li>
        <li class="demo2-li"><a href="#">333</a></li>
        <li class="demo2-li"><a href="#">444</a></li>
        <li class="demo2-li"><a href="#">555</a></li>
      </ul>
    </div>
  </body>
</html>