导航链接上的填充百分比

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>