css - li 中的长文本扰乱了设计

Question

我已经为进度实现了定制设计。我为此使用了ul-li。当 li 有短文本但长文本失败时，它工作正常。这是 jsfiddle同样。你能帮忙吗？

HTML

<div class="stepProgressBarContainer">
<ul class="stepProgessBar">
<li class="completed">Step 1 2 3 4 5 5</li>
<li>Step 2</li>
<li>Step 3</li>
<li>Step 4</li>
<li>Step 5</li>
</ul>
</div>

SCSS

.stepProgressBarContainer {
  width: 100%;

  .stepProgessBar {  
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    padding: 0px;
    li  {
          list-style-type: none;
          position: relative;
          text-align: center;
          flex-grow: 1;

          &:before{
               content: '';
               display: block;
               width: 18px;
               height: 18px;
               -moz-border-radius: 9px;
               -webkit-border-radius: 9px;
               border-radius: 9px;
               background: #FFFFFF;
               border: 4px solid #CCCCCC;
               box-sizing: border-box;
               text-align: center;
               margin: 0px auto 7.5px auto;
          }

          &:after{
            content: '';
            position: absolute;
            width: 100%;
            height: 4px;
            background-color: #DDDDDD;
            top:7px;
            left: -50%;
            z-index: -1;
          }
          &:first-child:after{
            content: none;
          }
          &:last-child:before{
            border-color:#2266E3;
          }

          &.completed{
            + :after{
              background: linear-gradient(0deg, #2266E3, #2266E3);
            }
            &:before{
              content: '\E73E';
              border: 0;
              background: #2266E3;
            }

          }

        }
  }
}

注意:它应该是响应式的。 提前致谢。

Answer 1

在您的代码中添加 justify-content: stretch; 时出现问题。我已将 justify-content: space-between; 替换为步骤之间的相等间距。并且还为您的列表添加了 width: 100%; 以使其全宽。

* {
box-sizing: border-box;
position: relative;
}

.stepProgressBarContainer {
width: 100%;
}

.stepProgressBarContainer .stepProgessBar {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0px;
}

.stepProgressBarContainer .stepProgessBar li {
list-style-type: none;
position: relative;
text-align: center;
display: block;
width: 100%;
}

.stepProgressBarContainer .stepProgessBar li:before {
content: '';
display: block;
width: 18px;
height: 18px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
background: #fff;
border: 4px solid #ccc;
box-sizing: border-box;
text-align: center;
margin: 0px auto 7.5px auto;
}

.stepProgressBarContainer .stepProgessBar li:after {
content: '';
position: absolute;
width: 100%;
height: 4px;
background-color: #ddd;
top: 7px;
left: -50%;
z-index: -1;
}

.stepProgressBarContainer .stepProgessBar li:first-child:after {
content: none;
}

.stepProgressBarContainer .stepProgessBar li:last-child:before {
border-color: #2266e3;
}

.stepProgressBarContainer .stepProgessBar li.completed +:after {
background: linear-gradient(0deg, #2266e3, #2266e3);
}

.stepProgressBarContainer .stepProgessBar li.completed:before {
content: '\E73E';
border: 0;
background: #2266e3;
content: "\f007";
font-family: 'Font Awesome\ 5 Free';
font-weight: 900;
}

<div class="stepProgressBarContainer">
<ul class="stepProgessBar">
    <li class="completed">Step 1 2 3 4 5 5</li>
    <li>Step 2</li>
    <li>Step 3</li>
    <li>Step 4</li>
    <li>Step 5</li>
</ul>
</div>