如何使<li>元素铺满<ul>整宽？第二行方块无法分散对齐

你当前的问题是text-align: justify不会对最后一行元素生效，所以第二行的方块会靠左聚集。下面提供两种可行的解决方案：

方案一：利用伪元素触发完整对齐 #

给容器添加伪元素，让布局认为内容未结束，从而让text-align: justify对所有行生效：

#menu ul {
    width: 60%;
    border: 1px solid blue;
    padding: 0px;
    margin: 10px auto;
    text-align: justify;
}

/* 添加伪元素补全对齐 */
#menu ul::after {
    content: "";
    display: inline-block;
    width: 100%;
}

#menu li {
    border: 1px solid blue;
    list-style-type: none;
    width: 150px;
    height: 150px;
    margin: 5px;
    display: inline-block;
}

方案二：使用Flex布局（更简洁推荐） #

Flex布局天生支持多行均匀分布，代码更易维护：

#menu ul {
    width: 60%;
    border: 1px solid blue;
    padding: 0px;
    margin: 10px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /* 用gap控制元素间距，替代margin */
    gap: 10px;
}

#menu li {
    border: 1px solid blue;
    list-style-type: none;
    width: 150px;
    height: 150px;
}

如果需要最后一行元素左对齐（和示例图效果一致），只需把justify-content: space-between替换为justify-content: flex-start即可。

内容的提问来源于stack exchange，提问作者Marius Cojocaru