列表對齊問題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

回答

相關問題