我怎样才能使元素在内容之间对齐

Question

我想分隔两个元素，一个最右边，另一个最左边我尝试使用 justify-content-between 但不起作用我不知道为什么

HTML

<div class="post-left d-sm-flex justify-content-between">
    <ul>
        <li>
            <div class="post-author">
                <div class="avatar avatar-online avatar-xs">
                    <a href="doctor-profile.html"><img src="assets/img/doctors/doctor-thumb-01.jpg" class="avatar-img rounded-circle" alt="Post Author">
                        <span>username</span></a>
                </div>
            </div>
        </li>
        <li class="h4 "><i class="fas fa-money-bill-alt money"></i>400 $</li>                                                       
    </ul>
</div>

风格

.post-left ul {

    list-style: none;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: inherit;
}

.post-left ul li {
    color: #15558d ;
    margin-bottom: 5px;
    margin-left: 10px;
    
}

Answer 1

您可以将 justify-content: space-between; 添加到 .post-left ul ，如下所示：

.post-left ul {
    .
    .
    .

    justify-content: space-between;
}

我怎样才能使元素在内容之间对齐

how can I make elements justify-content-between

html

css

html-lists

bootstrap-4