與CSS三角形和項目之間

保證金響應麪包屑我想打一個麪包屑模擬一個進度條，就這樣與CSS三角形和項目之間

默認情況下，所有項目都是灰色和階級「已完成」的綠色。但是我對最後一個元素有一個問題，使用寬度進行播放：請留出空間或跳到下一行。這是我的代碼（SCSS & HTML）：

ul.progress-tracker { 
 
    margin: 15px 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    &: before, &: after { 
 
    clear: both; 
 
    } 
 
    li { 
 
    list-style: none; 
 
    &: first-child { 
 
     a: before { 
 
     display: none; 
 
     } 
 
    } 
 
    &:last-child { 
 
     padding-right: 8px; 
 
     a { 
 
     margin: 0; 
 
     min-width: 30.09%; 
 
     padding: 3px 0 0 8px; 
 
     &: after { 
 
      display: none; 
 
     } 
 
     } 
 
    } 
 
    a { 
 
     content: ""; 
 
     display: block; 
 
     float: left; 
 
     height: 8px; 
 
     background: tint($light-blue, 60%); 
 
     text-align: center; 
 
     padding: 3px 4px 0 8px; 
 
     position: relative; 
 
     margin: 0 10px 0 0; 
 
     text-decoration: none; 
 
     color: #fff; 
 
     min-width: 31%; 
 
     &: before { 
 
     content: ""; 
 
     border-color: transparent; 
 
     border-top: 4px solid transparent; 
 
     border-bottom: 4px solid transparent; 
 
     border-left: 4px solid $light-gray; 
 
     position: absolute; 
 
     left: 0; 
 
     top: 0; 
 
     } 
 
     &:after { 
 
     content: ""; 
 
     border-top: 4px solid transparent; 
 
     border-bottom: 4px solid transparent; 
 
     border-left: 4px solid tint($light-blue, 60%); 
 
     position: absolute; 
 
     right: -4px; 
 
     top: 0; 
 
     z-index: 1; 
 
     } 
 
    } 
 
    a.completed { 
 
     background-color: $primary-green; 
 
     &: after { 
 
     border-left-color: $primary-green; 
 
     } 
 
    } 
 
    } 
 
}

<ul class="progress-tracker"> 
 
    <li> 
 
    <a class="completed"> 
 

 
    </a> 
 
    </li> 
 
    <li> 
 
    <a> 
 

 
    </a> 
 
    </li> 
 
    <li> 
 
    <a> 
 

 
    </a> 
 
    </li> 
 
</ul>

來源

2016-07-04 Jorgelig

是否有需要爲這些「麪包屑內的文本「？ – amn

爲決議電話（XS）沒有文字裏面，有可能的版本的桌子和桌子在步數（1,2,3）轉 – Jorgelig

好吧。問題是什麼？據我所知，你只顯示了三張圖片並顯示了你的代碼。你說你想顯示進度條「就像這樣」，其中一個終止沒有結束的酒吧被繪製，但是你說你有一個問題暗指無意義的結束。 – amn

解決：

ul.progress-tracker { 
 
    padding: 0; 
 
    overflow: hidden; 
 
} 
 
ul.progress-tracker:before, ul.progress-tracker:after { 
 
    clear: both; 
 
} 
 
ul.progress-tracker li { 
 
    list-style: none; 
 
    float: left; 
 
    min-width: calc(100%/3); 
 
    padding-right: 5px; 
 
} 
 
ul.progress-tracker li:first-child a:before { 
 
    display: none; 
 
} 
 
ul.progress-tracker li:last-child { 
 
    padding-right: 0px; 
 
} 
 
ul.progress-tracker li:last-child a { 
 
    margin: 0; 
 
} 
 
ul.progress-tracker li:last-child a:after { 
 
    display: none; 
 
} 
 
ul.progress-tracker li a { 
 
    content: ""; 
 
    display: block; 
 
    height: 8px; 
 
    background: #bcc3c4; 
 
    text-align: center; 
 
    position: relative; 
 
    text-decoration: none; 
 
    color: #fff; 
 
} 
 
ul.progress-tracker li a:before { 
 
    content: ""; 
 
    border-color: transparent; 
 
    border-top: 4px solid transparent; 
 
    border-bottom: 4px solid transparent; 
 
    border-left: 4px solid #EAF3E3; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
} 
 
ul.progress-tracker li a:after { 
 
    content: ""; 
 
    border-top: 4px solid transparent; 
 
    border-bottom: 4px solid transparent; 
 
    border-left: 4px solid #bcc3c4; 
 
    position: absolute; 
 
    right: -4px; 
 
    top: 0; 
 
    z-index: 1; 
 
} 
 
ul.progress-tracker li a.completed { 
 
    background-color: #8ABD2E; 
 
} 
 
ul.progress-tracker li a.completed:after { 
 
    border-left-color: #8ABD2E; 
 
}

 <ul class="progress-tracker"> 
 
      <li> 
 
       <a class="completed"> 
 
        
 
       </a> 
 
      </li> 
 
      <li> 
 
       <a class="completed"> 
 

 
       </a> 
 
      </li> 
 
      <li> 
 
       <a> 
 
        
 
       </a> 
 
      </li> 
 
     </ul>

來源

2016-07-05 16:06:17 Jorgelig

與CSS三角形和項目之間

回答

相關問題