fix Schritt Linie reaktions CSS

Question

Dies ist, was ich zu erreichen versuchen:

Dies ist, was mein Code erzeugt:

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

Wie kann ich meine einstellen Code, um diese Linie ansprechend zu machen?

Answer 1

können Sie mediaqueries auf mobile hinzufügen, weil Streifen nicht mehr als 33% Zentrum auf mobilen (ganze Zeile 90%) sein kann

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

Demo: 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; 

} 

Demo: https://jsfiddle.net/kc1tbu8x/2/

Answer 4

Es gibt einen anderen Weg, aber die Flexbox-Lösung oben denke ich ist gut. Demo: 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

Versuchen, es ist gutes Beispiel

<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 Beispiel https://jsfiddle.net/4j07gbrd/