html - 如何将图标从一行的开头对齐到水平均匀分布的一行的结尾？

Question

如何让图标从行首显示到行尾，并且均匀分布？图标应均匀分布，图标应位于行的开头和结尾。我想不出如何把它走到最后。

感谢您的帮助!

.steps {
    width: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    align-items: stretch;
}

.steps div {
    line-height: 3em;
    display: flex;
    justify-content: space-between;
    flex: 1 1 auto;
    align-items: stretch;
}

.steps .complete-step {
    border-bottom: 4px solid #95CA3E;
}

.steps .incomplete-step {
    border-bottom: 4px solid #0369B3;
}

.steps div:after {
    content: "\00a0\00a0";
}

.steps div:before {
    position: relative;
    bottom: -2.5em;
    float: none;
    line-height: 1em;
}

.steps .complete-step:before {
    font-family: 'FontAwesome';
    content: "\f111";
    color: #95CA3E;
    background-color: #95CA3E;
    height: 1.2em;
    width: 1.2em;
    border-radius: 1.2em;
}

.steps .incomplete-step:before {
    font-family: 'FontAwesome';
    content: "\f192";
    font-size: 1.5em;
    bottom: -1.6em;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>

<div class="steps">
    <div class="complete-step"></div>
    <div class="complete-step"></div>
    <div class="incomplete-step"></div>
    <div class="incomplete-step"></div>
    <div class="incomplete-step"></div>
    <div class="incomplete-step"></div>
    <div class="incomplete-step"></div>
</div>

Answer 1

你不能那样做，因为 flexbox 会计算它的 child 的大小。您的图标不是子元素，它们在子元素中(在 :before 伪元素中)。不过，您可以快速做的是欺骗它并删除最后一个 child 上的线 ;) 否则，我认为您将不得不检查您的 DOM。

使用 :last-child 选择器，您还可以更改最后一个元素的宽度或任何您想要改进行尾设计的内容!

.steps {
            width: 100%;
            display: -webkit-flex;
            display: flex;
            -webkit-justify-content: space-between;
            justify-content: space-between;
            align-items: stretch;
        }

        .steps div {
            line-height: 3em;
            display: flex;
            justify-content: space-between;
            flex: 1 1 auto;
            align-items: stretch;
        }

        .steps .complete-step {
            border-bottom: 4px solid #95CA3E;
        }

        .steps .incomplete-step {
            border-bottom: 4px solid #0369B3;
        }

        .steps .complete-step:last-child {
            border-bottom: none;
        }

        .steps .incomplete-step:last-child {
            border-bottom: none;
        }

        .steps div:after {
            content: "\00a0\00a0";
        }

        .steps div:before {
            position: relative;
            bottom: -2.5em;
            float: none;
            line-height: 1em;
        }

        .steps .complete-step:before {
            font-family: 'FontAwesome';
            content: "\f111";
            color: #95CA3E;
            background-color: #95CA3E;
            height: 1.2em;
            width: 1.2em;
            border-radius: 1.2em;
        }

        .steps .incomplete-step:before {
            font-family: 'FontAwesome';
            content: "\f192";
            font-size: 1.5em;
            bottom: -1.6em;
        }

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>

<div class="steps">
        <div class="complete-step"></div>
        <div class="complete-step"></div>
        <div class="incomplete-step"></div>
        <div class="incomplete-step"></div>
        <div class="incomplete-step"></div>
        <div class="incomplete-step"></div>
        <div class="incomplete-step"></div>
    </div>