목록 정렬 문제 css

세로 진행 표시 줄을 만들려고하지만 목록에 문제가 발생합니다. 모든 것이 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>

출처

2016-07-24 Macsika Imoh

모든 코드 게시, HTML 포함 – yanguya995

스 니펫을 포함하여 게시했습니다. –

코드에 실수가 없습니다. 그것은 10 이상에서 1, 0, 1, 1 등과 같은 문자가 있기 때문입니다. – Harish

... 코드입니다 귀하의 .list_progress_bar li : befo

재

그런 다음 모두 당신의 .list_progres_bar_li a와 .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 자리 숫자를 포함하므로 할당 된 UR 경계 반경이 너비의 절반과 거의 같아지고 원처럼 보입니다. 모두의 평등을 위해 div 또는 radius의 너비 중 하나를 연주하십시오. 테두리 반지름을 %로 사용하십시오.

출처

2016-07-24 03:27:18

목록 정렬 문제 css

답변

관련 문제