带有 CSS 三角形和项目间边距的响应式面包屑答案

【问题标题】：Responsive Breadcrumbs with CSS Triangles and margin between items带有 CSS 三角形和项目间边距的响应式面包屑
【发布时间】：2016-11-06 14:35:24
【问题描述】：

我想做一个模拟进度条的面包屑，就像这样

默认情况下，所有项目都是灰色的，“完成”类是绿色。但我对最后一个元素有问题，玩宽度：给我一个空间或跳到下一行。这是我的代码（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>

【问题讨论】：

这些“面包屑”中是否需要有文字？
对于分辨率 phone (xs) 里面没有文字，可能是对于 table 和 desktop 的版本在 step (1,2,3) 转数中
好的。问题是什么？据我所知，您只显示了三张图像并显示了您的代码。您说您想“像这样”显示进度条，其中绘制了一个没有结束的栏，但是您说您有一个暗示缺少尖端的问题。
我的问题是我不能让条形图比屏幕宽 100%，它在红色框中标记。
你会在那些a 元素中有文本吗？

标签： html css responsive-design sass breadcrumbs

【解决方案1】：

已解决：

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>

【讨论】：