我正在尝试制作一个垂直进度条，但我总是遇到列表问题。从第 1 个 child 到第 9 个 child ，一切似乎都很好。然而，从第 10 个 child 开始， :before 内容变成循环，我不知道我做错了什么。
这是代码...
<!doctype html>
<html lang="en-US">
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" />
<style>
.list_progress_bar {
counter-reset: step;
padding: 40px 0px;
margin: 0;
position: relative;
height: 100%;
}
.list_progress_bar li {
position: relative;
width: 100%;
list-style-type: none;
}
.list_progress_bar li:before {
content: counter(step);
color: red;
counter-increment: step;
padding: 10px;
line-height: 30px;
border: 1px solid #ddd;
margin: 0 auto 10px auto;
border-radius: 50px;
background-color: #fff;
}
.list_progress_bar li:after {
content: '';
position: absolute;
height: 100%;
width: 1%;
background-color: #ddd;
z-index: -1;
top: -60px;
left: 35px;
}
.list_progress_bar li.first_child:after {
content: none;
}
.list_progress_ba li:not(:first-child) {
margin-top: 5px;
}
.list_progress_bar li a {
margin-left: 55px;
margin-top: -39px;
padding: 0px 5px;
border: 1px solid #c7c6c2;
background-color: #fff;
border-radius: 3px;
font-size: 12px;
color: #7b7a76;
box-shadow: 1px 1px 2px #dedcd4;
}
.list_progress_bar li.active:before {
border-color: #008dcb;
background-color: #008dcb;
color: #fff;
}
.list_progress_bar li.active + li:after {
background-color: #008dcb;
}
</style>
</head>
<body>
<ul class="list_progress_bar">
<li class="active first_child">
<a class="lister" list-video-id="h14wr4pXZFk" style="cursor: pointer;">Lorem ipsum dolor sit amet</a>
</li>
<li>
<a class="lister" list-video-id="h14wr4pXZFk" style="cursor: pointer;">Lorem ipsum dolor sit amet</a>
</li>
<li>
<a class="lister" list-video-id="h14wr4pXZFk" style="cursor: pointer;">Lorem ipsum dolor sit amet</a>
</li>
<li>
<a class="lister" list-video-id="h14wr4pXZFk" style="cursor: pointer;">Lorem ipsum dolor sit amet</a>
</li>
<li>
<a class="lister" list-video-id="h14wr4pXZFk" style="cursor: pointer;">Lorem ipsum dolor sit amet</a>
</li>
<li>
<a class="lister" list-video-id="h14wr4pXZFk" style="cursor: pointer;">Lorem ipsum dolor sit amet</a>
</li>
<li>
<a class="lister" list-video-id="h14wr4pXZFk" style="cursor: pointer;">Lorem ipsum dolor sit amet</a>
</li>
<li>
<a class="lister" list-video-id="h14wr4pXZFk" style="cursor: pointer;">Lorem ipsum dolor sit amet</a>
</li>
<li>
<a class="lister" list-video-id="h14wr4pXZFk" style="cursor: pointer;">Lorem ipsum dolor sit amet</a>
</li>
<li>
<a class="lister" list-video-id="h14wr4pXZFk" style="cursor: pointer;">Lorem ipsum dolor sit amet</a>
</li>
<li>
<a class="lister" list-video-id="h14wr4pXZFk" style="cursor: pointer;">Lorem ipsum dolor sit amet</a>
</li>
<li>
<a class="lister" list-video-id="h14wr4pXZFk" style="cursor: pointer;">Lorem ipsum dolor sit amet</a>
</li>
<br>
</ul>
</body>
</html>最佳答案
随着填充类型的增加，两位数会导致问题
现在你可以添加
Position:absolute;
min-width: 20px;//or whatever value yo see suitable
在你的 .list_progress_bar li:before 上
然后增加你的左边 .list_progres_bar_li a 和 .list_progress_bar li:after
关于html - 列表对齐问题 css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38547551/