小编Kar*_*gge的帖子

我正在尝试建立一个进度条,通常在结账时看到.

问题是,箭头之间的边界是透明的,整个事物应该是响应的.我到目前为止:

http://codepen.io/MrBambule/pen/rVBeoz

但我无法弄清楚如何让条形的项目跨越父容器的整个宽度(笔中的红色边框)并保持响应.
我想我可以用JS解决这个问题,但我宁愿拥有一个CSS解决方案.
非常感谢帮助.

HTML

<ul class="progress-nav">
  <li class="active">
    <span>1. FOO</span>
  </li>
  <li>
    <span>2. BAR</span>
  </li>
  <li>
    <span>3. BAZ</span>
  </li>
</ul>

CSS

$bar-color: rgba(255, 255, 255, 0.2);
$bar-active-color: rgba(255, 255, 255, 0.6);
$arrow-size: 22px;

body {
  background: linear-gradient(left, #803689, #5eb6e4);
}

.progress-nav {
  position: relative;
  font-size: 0;
  margin: 100px auto;
  width: 80%;
  max-width: 900px;

  // dummy border to display the width problem 
  border: 1px solid red;

  li {
    position: relative;
    color: #fff; …