步进引导组件

问题描述 投票：0回答：2

我试图将步进线居中在步进图标的中间。除此之外，我希望将线放在图标后面或隐藏起来。

请查看我正在尝试创建的组件的图像：

.stepper-container {
  height: 300px;
  position: relative;
  background-color: black;
}
.stepper-line {
  position: absolute;
  border-top: 1px dashed #8da0aa;
  width: 100%;
  margin: 0 auto;
  top: 50%;
}

.step-container {
  position: absolute;
  top: 50%;
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.step {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.step-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  border: 2px solid #D9DFE3;
  box-shadow: 0px 4px 8px rgba(141, 160, 170, 0.1);
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  line-height: 30px;
  color: #8DA0AA;
}
<div class="stepper-container">
  <div class="stepper-line"></div>
  
  <div class="step-container">
    <div class="step">
      <a href="#" class="step-icon"><span>1</span></a>
    </div>
    <div class="step">
      <a href="#" class="step-icon"><span>2</span></a>
    </div>
    <div class="step">
      <a href="#" class="step-icon"><span>3</span></a>
    </div>
    <div class="step">
      <a href="#" class="step-icon"><span>4</span></a>
    </div>
  </div>
</div>

期待来了：

html css components
2个回答
0
投票

试试这个， 我只是在“步骤”中调整了位置并添加了背景颜色以进行演示。

.stepper-container {
  height: 300px;
  position: relative;
  background-color: black;
}
.stepper-line {
  position: absolute;
  border-top: 1px dashed #8da0aa;
  width: 100%;
  margin: 0 auto;
  top: 50%;
}

.step-container {
  position: absolute;
  top: 50%;
  display: flex;
  width: 100%;
  justify-content: space-between;
  transform:translateY(-50%);
}
.step {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.step-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  border: 2px solid #D9DFE3;
  box-shadow: 0px 4px 8px rgba(141, 160, 170, 0.1);
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  line-height: 30px;
  color: #8DA0AA;
  background:#444;
}
<div class="stepper-container">
  <div class="stepper-line"></div>
  
  <div class="step-container">
    <div class="step">
      <a href="#" class="step-icon"><span>1</span></a>
    </div>
    <div class="step">
      <a href="#" class="step-icon"><span>2</span></a>
    </div>
    <div class="step">
      <a href="#" class="step-icon"><span>3</span></a>
    </div>
    <div class="step">
      <a href="#" class="step-icon"><span>4</span></a>
    </div>
  </div>
</div>

0
投票
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.stepper-container {
  height: 300px;
  position: relative;
  
}

.step-container {
  position: absolute;
  top: 50%;
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.stepper-line {
  position: absolute;
  border-top: 1px dashed #8da0aa;
  width: 100%;
  margin: 0 auto;
  top: 60%;
  z-index: -1;
}
.step {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.step-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  border: 2px solid #D9DFE3;
  box-shadow: 0px 4px 8px rgba(141, 160, 170, 0.1);
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  line-height: 30px;
  color: #8DA0AA;
  background-color: #006666;
  z-index: 1;
}
</style>
</head>
<body>

<div class="stepper-container">
  <div class="stepper-line"></div>
  
  <div class="step-container">
    <div class="step">
      <a href="#" class="step-icon"><span>1</span></a>
    </div>
    <div class="step">
      <a href="#" class="step-icon"><span>2</span></a>
    </div>
    <div class="step">
      <a href="#" class="step-icon"><span>3</span></a>
    </div>
    <div class="step">
      <a href="#" class="step-icon"><span>4</span></a>
    </div>
  </div>
</div>

</body>
</html>

我想这就是你想要的。我在 stepper-line 类中更改了

top: 60%
，并添加了 z-index 以让 stepper-line 在图标后面。还有一个背景在.step-icon，你可以把背景颜色改成你想要的。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.