Question

这就是我想要实现的目标：

这是我的代码产生的：

.line {
  position: relative;
  background-color: #f1f1f1;
  width: 34%;
  height: 2px;
  bottom: 36px;
  left: 33%;
}

如何调整代码以使此行响应？

Answer 1

.line
{
  z-index:5;
  position: relative;
  background-color: #f1f1f1;
  width: 34%;
  height: 2px;
  bottom: 36px;
  left: 33%;
}
.yourcircle class
{
  z-index:4;
}

Answer 2

演示：https://jsfiddle.net/kc1tbu8x/2/

HTML：

<div class="wrapper">
<div class="step1">
  <hr/>
</div>

<div class="step2">
  <div class="step2_circles">1</div>
  <div class="step2_circles">2</div>
  <div class="step2_circles">3</div>
</div>
</div>

的CSS：

.wrapper{
  width:30%;
  height:40px;
   display:block;
   position:relative;
}
.step1{
  width:98%;
  z-index:-9999;
  position:absolute;
  top:25%;
  display:block;
  margin:auto;

}
.step2{
  width:100%;
   display:flex;
  display:-webkit-flex;
  -webkit-justify-content: space-between;
    justify-content: space-between;
}
.step2_circles{
  width:40px;
  height:40px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  background:#ff0000;
  text-align:center;
  line-height:40px;

}

演示：https://jsfiddle.net/kc1tbu8x/2/

Answer 3

还有另外一种方法，但我认为上面的flexbox解决方案很好。演示：http://codepen.io/anon/pen/XppLjW

HTML：

<div class="steps">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>

CSS：

.steps {
  width: 100%;
  height: 80px;
  max-width: 80%;
  margin: 3em auto;
  text-align: center;
  position: relative;
}
.steps::before {
  left: 0;
  top: 50%;
  content: '';
  width: 100%;
  height: 1px;
  display: block;
  position: absolute;
  background-color: #e5e5e5;
}
.steps span {
  width: 80px;
  height: 80px;
  line-height: 80px;
  border-radius: 50%;
  text-align: center;
  position: absolute;
  display: inline-block;
  background-color: #d4d4d4;
}
.steps span:first-child {
  left: 0;
}
.steps span:nth-child(2) {
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.steps span:last-child {
  right: 0;
}

Answer 4

尝试，这是一个很好的例子

<div class="container">
  <div class="number">1</div>
  <div class="number">2</div>
  <div class="number">3</div>
</div>

.container {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.container:before {
  content: '';
  display: block;
  height: 2px;
  width: 100%;
  position: absolute;
  top: 50%;
  margin-top: -1px;
  background:red;
}

.container .number {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: blue;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 10;
}

JSfiddle示例https://jsfiddle.net/4j07gbrd/

Answer 5

你可以将媒体查询添加到移动设备，因为条带不能在移动设备上占33％的中心位置（整线90％）

修复步骤线响应css

5 个答案: