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/ 不要忘记把每个李放在左边：

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%;
}

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

进度条100％宽度与css

2 个答案: