css - Progress Tracker CSS - 列表元素不均匀

Question

我一直在使用 this “进度跟踪器”CSS，但遇到了一个问题，即文本(对于每个 li 元素)长于一行，使进度跟踪器“未对齐”。 See an example here .

我尝试过的一种解决方案是在具有长文本的 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;
}

Answer 1

如果添加这段代码:

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

我相信你的风格应该如你所愿:-)

编辑:将 transform: translateX(-50%) 更改为 transform: translateX(-55%) 以使其更居中。