Question

我一直在使用this“Progress Tracker”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%)以使其更加集中。

Answer 2

感谢@rblarsen的回答，我认为对于锚元素的绝对定位是可行的方法，我添加了以下css以使进度跟踪线正确对齐：

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

Progress Tracker CSS - 列出不均匀的项目

2 个答案: