导航链接上的填充百分比

Question

我需要使这个导航栏响应起来，不要掉落下一个按钮。 我该怎么做？我做了一些变化，但没有任何变化。 http://student.itdc.ge/k.lolishvili/my_slider/

Answer 1

使用 flexbox 和 FontAwesome 图标的选项。

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