进度条100%宽度，带有css

我正在尝试基于此模板创建自定义进度条。是否有人知道如何使它的宽度100%的窗口，同时保持所有的元素和文本很好地对齐

为li指定宽度对我来说不太好，因为我无法通过这种方式使孔进度条采用100%宽度

    li { width: 30%; }

还有一个相关的问题。我如何设置孔进度条的最小宽度，以便在有人减小宽度时不会松动布局

---

提前非常感谢

当我想要某个东西有一定的宽度时，我通常会把它放在一个div中。例如（我不确定它是否适合你）你可以

<div id steps>
<ol class="steps">
    <li class="step1"><span>Estimate</span>

    </li>
    <li class="step2 current"><span>Delivery</span>

    </li>
    <li class="step3"><span>Payment</span>

    </li>
</ol>
</div>

它通常对我有效，但也可能有效，因为我的代码中还有其他内容。如果它不能立即工作，那么我也可以添加我使用的代码。

首先您必须使用：

*, *:after, *:before  {
outline: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding:0;
margin:0;
}

然后可以从css中使用calc属性

width: -webkit-calc(33.3333333% -76px);
    width: -moz-calc(33.3333333% -76px);
    width: calc(33.3333333% -76px);

这里演示 别忘了在每一个li上加上左侧浮子：

float:left;

您可以使用的最小宽度

min-width:600px;

---

我希望这有帮助

jsfiddle css不是真正的css，它需要一个预处理程序，因为您不知道“进度条”是什么。该模板显示了面包屑痕迹。

min-width:600px;