进度条 100% 宽度与 css答案

【问题标题】：progress bar 100% width with css进度条 100% 宽度与 css
【发布时间】：2013-07-25 00:02:53
【问题描述】：

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

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

    li { width: 30%; }

这里还有另一个相关问题。如何设置孔进度条的最小宽度，这样在有人减小寡妇宽度时不会丢失布局？

非常感谢您！

【问题讨论】：

那个 jsfiddle css 不是真正的 css，它需要一个预处理器
我想你不知道什么是“进度条”。该模板显示了一个面包屑路径。

标签： css

【解决方案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：

float:left;

你可以使用的最小宽度

min-width:600px;

希望对你有所帮助！

【讨论】：

【解决方案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%;
}

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

【讨论】：