列表对齐问题css

我想做一个垂直进度栏，但我一直遇到列表中的问题。从第1到第9个孩子一切都好了。但是，从第10个孩子开始：在内容变为循环之前，我不知道我做错了什么。列表对齐问题css

下面的代码...

<!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>

来源

2016-07-24 Macsika Imoh

发布所有代码，包括HTML – yanguya995

我已发布它，包括一个片段。 –

你的代码没有错误。这是因为，从10以上开始，有像1和0,1和1等字符。 – Harish

两位数导致问题作为填充类型的增加

现在你可以添加

Position:absolute; 
min-width: 20px;//or whatever value yo see suitable

在你的.list_progress_bar li：befo上再

再增加留在你的两个 .list_progres_bar_li和.list_progress_bar李：以后

来源

2016-07-24 01:42:56 yanguya995

好吧。

经过多一点工作。我终于发现了解决我自己的问题的办法，只是想分享。

.list_progress_bar li:nth-child(-n+12):before 
{ 
    padding: 10px 14px; 
    border-radius: 50%; 
}

来源

2016-07-24 03:05:01

没有与css写的错误。实际上当它达到10个宽度增加时。由于直到9之后只有一位数字，并且在div之后包含2位数字，所以指定的边界半径几乎等于其宽度的一半，并且看起来像圆圈。只要使用div或radius的宽度来让每个人都是平等的。以％为单位使用边框半径。

来源

2016-07-24 03:27:18

列表对齐问题css

回答

相关问题