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 - 列表項目不均勻

回答

相關問題