進捗バーのステップのCSSをステップに変更する際に問題が発生する

Question

進捗バーのCSSを変更する際に問題があります。添付の画像を確認してください。

1つの水平線に10個の値がすべて入ったプログレスバーがあります。

私はhtmlにスクリプトを含めています。

CSSスクリプト：

<style> 
    @-webkit-keyframes myanimation { 
    from { 
    left: 0%; 
    } 
    to { 
    left: 50%; 
    } 
} 
h1 { 
    text-align: center; 
    font-family: 'PT Sans Caption', sans-serif; 
    font-weight: 400; 
    font-size: 20px; 
    padding: 20px 0; 
    color: #777; 
} 

.checkout-wrap { 
    color: #444; 
    font-family: 'PT Sans Caption', sans-serif; 
    margin: 40px auto; 
    max-width: 1200px; 
    position: relative; 
} 

ul.checkout-bar li { 
    color: #ccc; 
    display: block; 
    font-size: 16px; 
    font-weight: 600; 
    padding: 14px 20px 14px 80px; 
    position: relative; 
} 
ul.checkout-bar li:before { 
    -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2); 
    box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2); 
    background: #ddd; 
    border: 2px solid #FFF; 
    border-radius: 50%; 
    color: #fff; 
    font-size: 16px; 
    font-weight: 700; 
    left: 20px; 
    line-height: 37px; 
    height: 35px; 
    position: absolute; 
    text-align: center; 
    text-shadow: 1px 1px rgba(0, 0, 0, 0.2); 
    top: 4px; 
    width: 35px; 
    z-index: 999; 
} 
ul.checkout-bar li.active { 
    color: #8bc53f; 
    font-weight: bold; 
} 
ul.checkout-bar li.active:before { 
    background: #8bc53f; 
    z-index: 99999; 
} 
ul.checkout-bar li.visited { 
    background: #ECECEC; 
    color: #57aed1; 
    z-index: 99999; 
} 
ul.checkout-bar li.visited:before { 
    background: #57aed1; 
    z-index: 99999; 
} 
ul.checkout-bar li:nth-child(1):before { 
    content: "1"; 
} 
ul.checkout-bar li:nth-child(2):before { 
    content: "2"; 
} 
ul.checkout-bar li:nth-child(3):before { 
    content: "3"; 
} 
ul.checkout-bar li:nth-child(4):before { 
    content: "4"; 
} 
ul.checkout-bar li:nth-child(5):before { 
    content: "5"; 
} 
ul.checkout-bar li:nth-child(6):before { 
    content: "6"; 
} 
ul.checkout-bar li:nth-child(7):before { 
    content: "7"; 
} 
ul.checkout-bar li:nth-child(8):before { 
    content: "8"; 
} 
ul.checkout-bar li:nth-child(9):before { 
    content: "9"; 
} 
ul.checkout-bar li:nth-child(10):before { 
    content: "10"; 
} 

ul.checkout-bar a { 
    color: #57aed1; 
    font-size: 16px; 
    font-weight: 600; 
    text-decoration: none; 
} 

@media all and (min-width: 800px) { 
    .checkout-bar li.active:after { 
    -webkit-animation: myanimation 3s 0; 
    background-size: 35px 35px; 
    background-color: #8bc53f; 
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); 
    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); 
    -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2); 
    box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2); 
    content: ""; 
    height: 15px; 
    width: 100%; 
    left: 50%; 
    position: absolute; 
    top: -50px; 
    z-index: 0; 
    } 

    .checkout-wrap { 
    margin: 80px auto; 
    } 

    ul.checkout-bar { 
    -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2); 
    box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2); 
    background-size: 35px 35px; 
    background-color: #EcEcEc; 
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent); 
    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent); 
    border-radius: 15px; 
    height: 15px; 
    margin: 0 auto; 
    padding: 0; 
    position: absolute; 
    width: 100%; 
    } 
    ul.checkout-bar:before { 
    background-size: 35px 35px; 
    background-color: #57aed1; 
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); 
    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); 
    -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2); 
    box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2); 
    border-radius: 15px; 
    content: " "; 
    height: 15px; 
    left: 0; 
    position: absolute; 
    width: 10%; 
    } 
    ul.checkout-bar li { 
    display: inline-block; 
    margin: 50px 0 0; 
    padding: 0; 
    text-align: center; 
    width: 19%; 
    } 
    ul.checkout-bar li:before { 
    height: 45px; 
    left: 40%; 
    line-height: 45px; 
    position: absolute; 
    top: -65px; 
    width: 45px; 
    z-index: 99; 
    } 
    ul.checkout-bar li.visited { 
    background: none; 
    } 
    ul.checkout-bar li.visited:after { 
    background-size: 35px 35px; 
    background-color: #57aed1; 
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); 
    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); 
    -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2); 
    box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2); 
    content: ""; 
    height: 15px; 
    left: 50%; 
    position: absolute; 
    top: -50px; 
    width: 100%; 
    z-index: 99; 
    } 
} 

    </style> 

HTML：

</head> 

    <body> 

    <link href='http://fonts.googleapis.com/css?family=PT+Sans+Caption:400,700' rel='stylesheet' type='text/css'/> 

<h1></h1> 

<div class="checkout-wrap"> 
    <ul class="checkout-bar"> 

    <li class="visited first"> 
     <a href="#">Possible candidate</a> 
    </li> 

    <li class="previous visited">Forwarded to manager</li> 

    <li class="previous visited">Phone screen</li> 

    <li class="previous visited">Interview</li> 

    <li class="previous visited">References</li> 

    <li class="previous visited">Medical Assessment</li> 

    <li class="previous visited">Backgroung Check</li> 

    <li class="previous visited">Offer</li> 

    <li class="previous visited">Hired</li> 

    <li class="active">Declined Offer</li> 

    </ul> 
</div>  
    </body> 

アライメント問題：

Answer 1

はトンを減らしてみてください彼は幅ul.checkout-bar liの@media all and (min-width: 800px) {メディアクエリ内にいます。現時点では19%なので、決して5つ以上を取得することはありません。代わりに5%を試し、vertical-align: top;を同じセレクタに追加してください。

フィドル：任意の潜在的な回答者のデバッグを支援するhttps://jsfiddle.net/yjz9Lzzg/