使用justify-content-between实现元素左右两端对齐失效如何解决

数据老陈

2026-9-28

问题原因

你把justify-content-between加在了外层.post-left容器上，但这个容器下只有唯一的子元素<ul>，Flex布局的两端对齐属性作用于容器的直接子元素，只有一个子元素的情况下无法产生左右分布效果
你要对齐的两个<li>元素的直接父级是<ul>，而<ul>的样式里显式设置了justify-content: center，就算你想让两个li两端对齐，这个属性也会覆盖对齐逻辑
另外<li>设置了固定的margin-left: 10px，会额外干扰对齐效果

注意：你给.post-left加的是d-sm-flex，意味着只有屏幕宽度≥576px时才会触发Flex布局，如果你需要所有尺寸下都生效，可以把d-sm-flex改成d-flex。

解决方法

方案1：保留现有DOM结构，调整样式

把对齐属性加到<ul>上，修改对应样式即可生效：

.post-left ul {
    list-style: none;
    display: flex;
    /* 把原有的center改成space-between */
    justify-content: space-between;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: inherit;
    /* 新增：让ul撑满父容器宽度 */
    width: 100%;
}

.post-left ul li {
    color: #15558d ;
    margin-bottom: 5px;
}
/* 调整边距逻辑，仅非第一个li加左外边距，避免最左侧出现留白 */
.post-left ul li:first-child {
    margin-left: 0;
}
.post-left ul li:not(:first-child) {
    margin-left: 10px;
}