sorunları adım

Question

İlerleme çubuğu için CSS'yi değiştirme ile ilgili sorunlarım var. Lütfen ekli resmi inceleyin.

Her 10 değerindeki ilerleme çubuğunu tek bir yatay çizgide olmasını isterim.

Betiği html'ye ekliyorum.

CSS Senaryo:

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

Hizalama sorunu:

Answer 1

t azaltmayı deneyin O, @media all and (min-width: 800px) { medya sorgusunda ul.checkout-bar li genişliğindedir. Şu anda 19%, böylece üst üste 5'ten fazla almazsınız. Bunun yerine 5%'u deneyin ve aynı seçiciye vertical-align: top; ekleyin.

Fiddle: https://jsfiddle.net/yjz9Lzzg/