使用flex布局（多行，一行三个），换行后最后一行左右对齐问题

 

复制代码
<html>

<head>
  <style>
    html,
    body,
    ul {
      margin: 0;
      padding: 0;
    }

    ul {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      /* justify-content: space-between; */
    }

    li {
      width: 33%;
      background: #ededee;
      margin-top: 1rem;
      list-style: none;
    }

    ul:after {
      content: "";
      width: 30%;
      height: 0px;
      visibility: hidden;
    }
  </style>
</head>

<body>
  <ul>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
  </ul>
</body>

</html>
复制代码

 

主要代码：

父：

 ul {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
  }

 

子：

li {
      width: 33%;
}

 

 

 

posted @   YJUI  阅读(11599)  评论(0)  编辑  收藏  举报
编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示