与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三角形和项目之间

回答

相关问题