Progress Tracker CSS - 列表项目不均匀

我一直在利用this“Progress Tracker”CSS，但遇到了一个问题，即文本（对于每个li元素）比一行更长使得进度跟踪器“未对齐” 。 See an example here。Progress Tracker CSS - 列表项目不均匀

我试过的一个解决方案是在长文本的li元素上设置overflow: hidden，但最终隐藏了部分文本。是否有更好的解决方案来保持跟踪器对齐，即使进度点有长文本？

CSS的进度跟踪：

/* progress tracker */ 
.progress-meter { 
    padding: 0; 
} 

ol.progress-meter { 
    padding-bottom: 9.5px; 
    list-style-type: none; 
} 
ol.progress-meter li { 
    display: inline-block; 
    text-align: center; 
    height: 35px; 
    width: 250px; 
    font-size: 12px; 
    border-bottom-width: 4px; 
    border-bottom-style: solid; 
    padding-bottom: 10px; 
    white-space: normal; 
    margin-right: -6px; 
} 
ol.progress-meter li:before { 
    position: relative; 
    float: left; 
    text-indent: 0; 
    left: -webkit-calc(50% - 9.5px); 
    left: -moz-calc(50% - 9.5px); 
    left: -ms-calc(50% - 9.5px); 
    left: -o-calc(50% - 9.5px); 
    left: calc(50% - 9.5px); 
} 
ol.progress-meter li.done { 
    font-size: 12px; 
} 
ol.progress-meter li.done:before { 
    content: "\2713"; 
    height: 19px; 
    width: 19px; 
    line-height: 21.85px; 
    bottom: -36.95px; 
    border: none; 
    border-radius: 19px; 
} 
ol.progress-meter li.todo { 
    font-size: 12px; 
} 
ol.progress-meter li.todo:before { 
    content: "\2B24"; 
    font-size: 17.1px; 
    bottom: -36.95px; 
    line-height: 18.05px; 
} 
ol.progress-meter li.done { 
    color: black; 
    border-bottom-color: yellowgreen; 
} 
ol.progress-meter li.done:before { 
    color: white; 
    background-color: yellowgreen; 
} 
ol.progress-meter li.todo { 
    color: silver; 
    border-bottom-color: silver; 
} 
ol.progress-meter li.todo:before { 
    color: silver; 
}

来源

2014-09-24 rafiki_rafi

感谢@rblarsen答案，我想与锚元素绝对定位将会是要走的路，我增加了以下css来使进度跟踪线正确对齐：

ol.progress-meter a{ 
    position: absolute; 
    top: 0; 
    left: 0%; 
    white-space: normal; 
    width: 250px; 
}

来源

2014-09-25 10:26:47

如果添加此代码：

ol.progress-meter li a { 
    position: absolute; 
    transform: translateX(-55%); 
    width: inherit; 
}

我相信你的风格应该是你想要的它:-)

编辑： 更改transform: translateX(-50%)至transform: translateX(-55%)使其更加集中。

来源

2014-09-24 14:00:55 rblarsen

Progress Tracker CSS - 列表项目不均匀

回答

相关问题