修復行步響應CSS

Question

這就是我想實現：

這是我的代碼生成：

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

我如何調整我的代碼使這行響應？

Answer 1

可以添加mediaqueries到移動，因爲條紋不能上移動33％中心（整行90％）

Answer 2

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

Answer 3

演示：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 4

還有另一種方法，但上面的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 5

嘗試，這是很好的例子

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