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

考虑响应模式，如下所示：

@media only screen and (max-width: 360px) {
.stepProgressBarContainer .stepProgessBar li {
    min-width: 70px;
}
}

@media only screen and (min-width: 361px) {
.stepProgressBarContainer .stepProgessBar li {
    min-width: 84px;
}
}

Answer 2

在代码中添加function isTriangle(a,b,c) { if(a > 0 && b > 0 && c > 0){ let angelA, cosAInverse; //law of cosines CosA = (b^2 + c^2 - a^2) / (2 * b * c); angelA = (Math.pow(b,2) + Math.pow(c, 2) - Math.pow(a,2)) / (2 * b * c); //Math.acosh(0.852); cosAInverse = Math.acosh(angelA); // expected value 28.95502437 console.log(cosAInverse); // NaN return cosAInverse; } return false; } var xx = isTriangle(1,2,2); console.log(xx);的问题。我已将scan file error: http: invalid Read on closed Body替换为步距相等。并且还为您的列表添加了func parser(resp http.ResponseWriter, req *http.Request){ var count int //....some of my code.. resp.Header().Set("Content-Type", "text/plain") scanner := bufio.NewScanner(req.Body) ctx := context.Background() for scanner.Scan() { itemID := scanner.Text() category := api.SearchAPI.FindCategory(itemID, lang, ctx) _, _ = fmt.Fprintf(resp, "%v,%v \n", itemID, category) count++ } if err := scanner.Err(); err != nil { logger.Errorf("scan file error: %v", err) http.Error(resp, err.Error(), http.StatusBadRequest) return } //..... }以使其全角。

justify-content: stretch;

justify-content: space-between;

li中的长文字干扰了设计

2 个答案: