0
私は垂直方向の進捗バーを作ろうとしていますが、リストに問題が発生し続けています。すべてが第1子から第9子まで大丈夫です。しかし、10代目の子供から：前のコンテンツは循環的になり、私は何が間違っているのか分かりません。リストの整列問題css
ここで二桁はあなたが
Position:absolute;
min-width: 20px;//or whatever value yo see suitable
を追加することができます増加今
のパディング種類などの問題を引き起こしているコード...
<!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>
すべてのコードを掲載する、HTMLを含む – yanguya995
スニペットを含めて投稿しました。 –
コードに間違いはありません。これは、10以上では、1や0,1,1などの文字があるからです。 – Harish