Question

我有一个水平的向导导航工作得很好，但是对于我无法实现的样式有一些要求。

我的代码：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

这是我目前的导航。我想要做的是第一个点位于父div的开头，而最后一个点位于父div的末尾。目前他们有一个偏移，因为他们在项目div的中间。

有没有办法解决这个问题？我正在使用react来做这个，所以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/

具有特定宽度

1 个答案: