元素不会伸展以适应寡妇，即使它设置为100％宽度

Question

我创建了这个http://jsfiddle.net/J5KMy/它是一个进度条，它看起来不错，但我似乎无法伸展它！使其宽度为100％，因此它会自动将步长拉伸到屏幕宽度。

我知道我在做什么才能让它不舒展？即使容器设置为100％宽度......

/*Progress Bar //////*/
 ol.progress-bar {
    width: 100%;
    height: 90px;
    overflow: hidden;
    text-align: center;
}
ol.progress-bar li {
    border-bottom: 3px solid rgba(0, 0, 0, 0.3);
    padding: 0 20px 16px 20px;
    float: left;
    line-height: 2em;
}
ol.progress-bar li.done {
    border-bottom: 3px solid #18BC9A;
}
ol.progress-bar li:before {
    position: relative;
    bottom: -2.2em;
    float: left;
    left: 50%;
    line-height: 1em;
}
ol.progress-bar li.done:before {
    font-family:"icons";
    content:"\e613";
    color: #fff;
    background-color: #18BC9A;
    border-radius: 50px;
    padding: 7px;
}

Answer 1

使用box-sizing来计算高度/宽度中的填充，您可以将每个li元素设置为25％。

JSFiddle DEMO |的 Full Screen View

当你无法在一行上显示每个li项时，它会变得很奇怪，但我假设你可以为此让路。

CSS我改变了：

 ol.progress-bar {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 90px;
    overflow: hidden;
    text-align: center;
}
ol.progress-bar li {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 3px solid rgba(0, 0, 0, 0.3);
    padding: 0 20px 16px 20px;
    float: left;
    line-height: 2em;
    width: 25%;
}

您可以在Mozilla's Developer Network

查看有关Box-Sizing的更多信息

  

<强> border-box

     

width和height属性包括填充和边框，但不包括边距。这是当文档处于Quirks模式时Internet Explorer使用的盒子模型。

Answer 2

对于块元素，没有必要使用width:100% - ol通常占用100％宽度，所有li都没有宽度，所以它是正常的他们还没有采取所有相关内容的宽度。我修改了您的jsFidlle，将display:table添加到ol和display:table-cell儿童，以便他们占据所有宽度。我添加box-sizing:border-box因为ol，ul上的默认浏览器padding-left，否则您的ol宽度将为100% + browser padding-left。希望就是你想要的。

Answer 3

您可以尝试this

我已将display: table用于ol.progress-bar而dsplay: table-cell用于ol.progress-bar li

CSS

/*Progress Bar //////*/
 ol.progress-bar {
    width: 100%;
    height: 50px;

    text-align: center;
    display: table;
    margin: 0;
    padding: 0;
}
ol.progress-bar li {
    border-bottom: 3px solid rgba(0, 0, 0, 0.3);
    display: table-cell;
    line-height: 2em;
    position: relative;
}
ol.progress-bar li.done {
    border-bottom: 3px solid #18BC9A;
}
ol.progress-bar li:before {
    position: absolute;
    bottom: -2.2em;
    float: left;
    left: 50%;
    bottom: -17px;
    line-height: 1em;

}
ol.progress-bar li.done:before {
    font-family:"icons";
    content:"\e613";
    color: #fff;
    background-color: #18BC9A;
    border-radius: 50px;
    padding: 7px;
}

Answer 4

为li元素应用一些宽度

19％的小提琴为我工作：

ol.progress-bar li {
    width: 19%;
    ...
}