Позиционирование точек вдоль линии

Question

Я пытаюсь создать следующий компонент с CSS, но я не могу заставить первую и последнюю точку сидеть на одном уровне с концами линии.

Он должен быть в состоянии поддерживать произвольное количество точек (от 1 и 4), и я не могу полагаться на Flexbox быть там.

У меня есть Реагировать компонент, который генерации HTML, который выглядит следующим образом:

<div class="row"> 
    <div class="col first" style="width:33%"> 
    <div class="marker complete"></div> 
    <label>Feedback</label> 
    </div> 
    <div class="col" style="width:33%"> 
    <div class="marker partial"></div> 
    <label>Observation</label> 
    </div> 
    <div class="col last" style="width:33%"> 
    <div class="marker review"></div> 
    <label>Documentation</label> 
    </div> 
</div> 

JavaScript вычисляет размеры столбцов перед визуализацией и in my codepen implementation, я просто центрирование все содержимое в каждом столбце.

Я могу сортировать решение с помощью классов first и last для относительно позиционирования конечных элементов, но неизменно при изменении размера экрана я начинаю получать края линии, выскакивающие из-за точек.

Кто-нибудь знает более разумную схему, чтобы начать строить это с помощью?

Answer 1

Здесь ya go. Я предполагаю, что это то, что вы ищете.

<div class="row"> 
    <div class="col" style="width:33%"> 
    <div class="marker marker1 complete"></div> 
    <label>Feedback</label> 
    </div> 
<div class="col2" style="width:33%"> 
    <div class="marker marker2 partial"></div> 
    <label>Observation</label> 
</div> 
<div class="col3" style="width:33%"> 
    <div class="marker marker3 review"></div> 
    <label>Documentation</label> 
    </div> 
</div> 

https://jsfiddle.net/norcaljohnny/e6nm2rbv/

* если JS была/разрешена я могу поставить некоторые условия в нем на основе количества и длины слова и настроить маркер отступы.

В основном я использовал блоки отображения, поля и классы вторичных маркеров для каждого блока.

Answer 2

Моей идеей было бы установить row как display: table-row, а затем использовать псевдоэлемент для создания горизонтальной полосы. Тем не менее, вы столкнулись с проблемой, которую вы не можете знать только с CSS и HTML, каково положение первого и последнего круга относительно размера контейнера. Поэтому невозможно использовать элемент полной ширины.

Другой подход - использовать метки как корневые элементы для псевдоэлементов. Они всегда имеют полную ширину столбца, поэтому они дают хорошее представление о том, что нужно использовать.

following proposed solution должен работать с IE9. Единственный специальный вещь, который используется calc и after. (Вместо calc вы можете также использовать transform: translate, если вы хотите.)

Основная идея заключается в том, чтобы использовать строку таблицы, которая будет автоматически масштабироваться хорошо, а затем использовать метки как корни, на которых можно построить индикатор прогресса ,

label:after { 
    content: ""; 
    height: .5em; 
    background: #e2e2e2; 
    width: 100%; 
    position: absolute; 
    top: calc((100% - 1.5em)/2); /* -1 to compensate text, -.5 for height bar */ 
    left: 0; 
    z-index: -1; 
} 

.first label:after, .last label:after { 
    width: 50%; 
} 

.first label:after { 
    left: auto; 
    right: 0; 
} 

.single label:after {content: none;} 

Answer 3

.row { 
 
    display: table; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    width: 100%; 
 
} 
 
.col { 
 
    display: table-cell; 
 
    width: 33%; 
 
    text-align: center; 
 
} 
 
.marker { 
 
    width: 30px; 
 
    height: 30px; 
 
    background-color: lightgray; 
 
    border-radius: 30px; 
 
    margin: 0 auto; 
 
} 
 
.complete { 
 
    background-color: blue; 
 
} 
 
.partial { 
 
    background-color: blue; 
 
    box-sizing: border-box; 
 
    border: 8px solid lightgray; 
 
} 
 
.review { 
 
    background-color: lightblue; 
 
} 
 
.col:not(:last-child) > .marker:after { 
 
    content: ''; 
 
    display: inline-block; 
 
    width: 67%; 
 
    height: 0; 
 
    border: 3px solid lightgray; 
 
    position: absolute; 
 
    left: 16.5%; 
 
    top: 12.5px; 
 
    z-index: -10; 
 
} 
 
/* ------------------------------------------- */ 
 

 
.wrapper { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    padding: 0 100px; 
 
} 
 
.point { 
 
    height: 30px; 
 
    background-color: lightgray; 
 
    border-radius: 30px; 
 
    flex: 0 0 30px; 
 
    position: relative; 
 
} 
 
.line { 
 
    height: 0; 
 
    border: 3px solid lightgray; 
 
    flex: 1 0; 
 
} 
 
.blue { 
 
    background-color: blue; 
 
} 
 
.lightblue { 
 
    background-color: lightblue; 
 
} 
 
.border { 
 
    background-color: lightgray; 
 
    background-image: radial-gradient(at center center, blue 0, blue 8px, transparent 8px, transparent 100%); 
 
} 
 
.point label { 
 
    position: absolute; 
 
    left: -50%; 
 
    top: 100%; 
 
    text-align: center; 
 
}

<h1>Non flex</h1> 
 
<div class="row"> 
 
    <div class="col first"> 
 
    <div class="marker complete"></div> 
 
    <label>Feedback</label> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="marker partial"></div> 
 
    <label>Observation</label> 
 
    </div> 
 
    <div class="col last"> 
 
    <div class="marker review"></div> 
 
    <label>Documentation</label> 
 
    </div> 
 
</div> 
 
<h1>Flex</h1> 
 
<div class="wrapper"> 
 
    <div class="point blue"> 
 
    <label>Feedback</label> 
 
    </div> 
 
    <div class="line"></div> 
 
    <div class="point blue border"> 
 
    <label>Observation</label> 
 
    </div> 
 
    <div class="line"></div> 
 
    <div class="point lightblue"> 
 
    <label>Documentation</label> 
 
    </div> 
 
</div>