javascript - 具有特定宽度的水平向导导航

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 的中间。

有没有办法解决这个问题？ 我正在使用 React 来执行此操作，因此 JavaScript 解决方案也可以使用。

Answer 1

好吧，如果我理解的话，问题是这个东西没有父级那么宽。这是一个解决方案...

第 1 步:摆脱行内宽度样式

第 2 步:摆脱 <div class="WizardNavigation__Line"></div>

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