техника CSS для горизонтальной линии в кассе шагов

Question

Я пытаюсь построить индикатор выполнения проверки как в приведенном ниже скрипки Fiddle Link Here

Проблемы здесь я столкнулся, что горизонтальные линии, не на месте. Незлая помощь. Я хочу, чтобы это как будет отображаться, как показано ниже

Чтобы показать код на временной шкале, как показано ниже

.checkout-broken .timeline { 
height: 0; 
width: 50%; 
position: relative; 
top: 31%; 
z-index: -1; 
border: 1px solid #005387 
} 

Answer 1

Вы можете установить position в absolute на:

.checkout-broken .timeline { 
    height: 0; 
    width: 50%; 
    - position: relative; 
    + position: absolute; 
    top: 31%; 
    z-index: -1; 
    border: 1px solid #005387 
} 

Для удаления промежутки между элементами .step вы можете использовать float: left; вместо display: inline-block.

http://jsfiddle.net/62de75kt/

Answer 2

Я не знаю, почему вы не хотите использовать Z-индекс, чтобы скрыть его (так как я считаю, что это самый простой способ), но вы можете изменить выравнивание для достижения результат. Смотрите скрипку: http://jsfiddle.net/tga7dbbu/

Вот часть CSS, которая была изменена:

.checkout-broken .timeline-r { 
    right: -20px; 
} 
.checkout-broken .timeline-l { 
    left: -20px; 
} 
.checkout-broken .step { 
    padding: 0 25px; 
    margin:0 10px; 
} 

Конечно, вы можете настроить его дальше, но принцип остается тем же самым.

Answer 3

Это лучше использовать: после того, как содержание

Demo: 

http://jsfiddle.net/b32yL29e/7/