Горизонтальная навигация мастера с определенной шириной

Question

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

Мой код:

.WizardNavigation {
  width: 100%;
  display: flex;
}

.WizardNavigation .WizardNavigation__Item {
  list-style-type: none;
  position: relative;
  text-align: center;
  flex: auto;
}

.WizardNavigation .WizardNavigation__Item .WizardNavigation__Point {
  display: block;
  width: 12px;
  height: 12px;
  text-align: center;
  border-radius: 50%;
  background: white;
  border: 1px solid blue;
  z-index: 1;
  margin: 0 auto;
  position: relative;
  outline: none;
  cursor: pointer;
}

.WizardNavigation .WizardNavigation__Item~.WizardNavigation__Item .WizardNavigation__Line {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  right: 50%;
  background-color: blue;
  top: 5px;
  z-index: 0;
}

.WizardNavigation .WizardNavigation__Item.WizardNavigation__Item--active .WizardNavigation__Point {
  background: blue;
  color: 1px solid blue;
}

.WizardNavigation .WizardNavigation__Item--active~.WizardNavigation__Item .WizardNavigation__Point {
  background: white;
  border: 1px solid gray;
}

.WizardNavigation .WizardNavigation__Item--active~.WizardNavigation__Item .WizardNavigation__Line {
  background-color: gray;
}

.WizardNavigation span {
  display: none;
}

<div class="WizardNavigation">
  <div class="WizardNavigation__Item" style="width: 25%;">
    <div class="WizardNavigation__Point" role="button" tabindex="-1"></div>
    <div class="WizardNavigation__Line"></div>
  </div>
  <div class="WizardNavigation__Item" style="width: 25%;">
    <div class="WizardNavigation__Point" role="button" tabindex="-1"></div>
    <div class="WizardNavigation__Line"></div>
  </div>
  <div class="WizardNavigation__Item WizardNavigation__Item--active" style="width: 25%;">
    <div class="WizardNavigation__Point" role="button" tabindex="-1"></div>
    <div class="WizardNavigation__Line"></div>
  </div>
  <div class="WizardNavigation__Item" style="width: 25%;">
    <div class="WizardNavigation__Point" role="button" tabindex="-1"></div>
    <div class="WizardNavigation__Line"></div>
  </div>
</div>

Это моя текущая навигация. Что я хочу сделать, так это то, что первая точка находится в начале родительского div, а последняя точка - в конце родительского div. На данный момент они имеют смещение, потому что они находятся в середине элемента div.

Есть ли способ решить эту проблему? Я использую реагирование, чтобы сделать так, чтобы решение javascript также работало.

Answer 1

Хорошо, если я понимаю, проблема в том, что эта вещь не такая широкая, как родитель Вот одно из решений ...

Шаг 1: избавиться от встроенного стиля ширины

Шаг 2: избавиться от <div class="WizardNavigation__Line"></div> s

Шаг 3: добавить следующее к .WizardNavigation

  justify-content: space-between;
  position: relative;
  overflow: hidden;

Шаг 4: Избавьтесь от этого .WizardNavigation .WizardNavigation__Item

text-align: center;
flex: auto;

Шаг 5: Добавьте что-нибудь обратно, чтобы заменить элементы <div class="WizardNavigation__Line"></div>. Мы будем использовать псевдоэлементы в элементе .WizardNavigation__Item--active.

.WizardNavigation__Item--active:before {
    content: '';
    position: absolute;

    background-color: blue;
    top: 6px;
    z-index: 0;  
    width: 100vw;
    right: 0;
    border-bottom: 2px solid blue;
}
.WizardNavigation__Item--active:after {
    content: '';
    position: absolute;

    background-color: blue;
    top: 6px;
    z-index: 0;  
    width: 100vw;
    left: 5px;
    border-bottom: 2px solid gray;
}

Я думаю, вот и все ... Смотри здесь: https://jsfiddle.net/rk6r7bwm/6/