Padding Prozentsatz auf Navigationslinks

Question

Ich muss diese Nav-Bar reagieren und nicht den nächsten Knopf fallen. Wie kann ich das tun? Ich mache einige Variationen, aber nichts hat sich geändert. http://student.itdc.ge/k.lolishvili/my_slider/

Answer 1

Eine Option mit Flexbox und FontAwesome Icons.

.black { 
 
    display: inline-block; 
 
    background-color: black; 
 
    height: 20px; 
 
    width: 40%; 
 
} 
 

 
.red { 
 
    display: inline-block; 
 
    background-color: red; 
 
    height: 20px; 
 
    width: 50%; 
 
} 
 

 
.slider { 
 
    border: 1px solid black; 
 
    margin-top: 20px; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    background-color: black; 
 
} 
 

 
.slider .prev:before { 
 
    font-family: FontAwesome; 
 
    content: "\f053"; 
 
    padding-right: .5em; 
 
} 
 

 
.slider .next:after { 
 
    font-family: FontAwesome; 
 
    content: "\f054"; 
 
    padding-left: .5em; 
 
} 
 

 
.slider .prev, 
 
.slider .next { 
 
    color: white; 
 
    background-color: black; 
 
    text-decoration: none; 
 
} 
 

 
.slider .numb { 
 
    background-color: white; 
 
    margin: 0 20px; 
 
    display: inline-block; 
 
    padding: 10px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="slider"> 
 
    <a href="#" class="prev">prev</a> 
 
    <div class="numb"> 
 
     2 of 7 
 
    </div> 
 
    <a href="#" class="next">next</a> 
 
    <span></span> 
 
    <span></span> 
 
    </div> 
 
    <div class="black"></div> 
 
    <div class="red"></div> 
 
</div>