css - 进度条 100% 宽度与 css

Question

我正在尝试基于此模板http://jsfiddle.net/dantetemp/V4uUk/8/创建自定义进度条。是否有人碰巧知道如何使其宽度为窗口的 100%，同时保持所有元素和文本很好地对齐？

将宽度分配给 li 对我来说并不好看，因为我无法通过这种方式让孔进度条占据 100% 的宽度。

    li { width: 30%; }

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

非常感谢您提前！！

Answer 1

首先你必须使用：

*, *: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);

在这里演示http://jsfiddle.net/V4uUk/9/ 不要忘记在每个 li 上放左浮动：

float:left;

对于您可以使用的最小宽度

min-width:600px;

我希望这有帮助！

Answer 2

当我希望某物具有一定宽度时，我通常会做的事情是把它放到一个 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>

然后在你的 CSS

#steps {
width:100%;
}

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