如何将图标从行的开始对齐到水平分布的行的末尾? [英] How do I align icons from the start of a line to the end of a line which is evenly distributed horizontally?

问题描述

如何从行首到行尾显示图标并使其均匀分布?图标应均匀分布，图标应位于行的开头和结尾.我不知道该怎么做.

How can I have the icon display from the beginning of the line to the end of the line and and have it evenly distributed? The icons should be evenly distributed and an icon should be at the start and end of the line. I can't figure out how to get it to the end.

感谢您的帮助！

.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>

推荐答案

要避免在行尾轻松完成，请使用:not()选择器，并结合:last-子，除最后一个子外，所有子项都将获得一行

To avoid a line at the end is easily done use the :not() selector, combined with :last-child, where all but the last child will get a line

.steps .complete-step:not(:last-child) {
  border-bottom: 4px solid #95CA3E;
}

当线穿过时，由于伪线是项的一部分，因此其边框将在其下方.您可以使用以下方式将伪移动到外部负的页边距，然后调整项目的大小，以使其与项目之间的间隔匹配，或者像下面的示例中那样简单地给不完整的伪背景颜色.

When it comes to the line shining through, as the pseudo are a part of the items, its border will be beneath it. You can either move the pseudo outside, using e.g. a negative margin, and then resize the items so they match the space between, or simply give the incomplete pseudo a background color, as I did in below sample.

堆栈片段

.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:not(:last-child) {       /*  changed  */
  border-bottom: 4px solid #95CA3E;
}

.steps .incomplete-step:not(:last-child) {     /*  changed  */
  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";
  background-color: white;                     /*  added  */
  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>

这篇关于如何将图标从行的开始对齐到水平分布的行的末尾?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！