如何在不影响按钮内容的情况下制作按钮循环？

Question

我有一个寻呼机HTML

.pager > li > a {
    color: black !Important;
}
.pager > li > a.right-arrow {
    margin-left: 335px;
    box-shadow: 0px 0px 5px #9ecaed;
    border-width: 0px;
}
.pager > li > a.left-arrow {
    margin-right: 335px;
    box-shadow: 0 0 5px #9ecaed;
    border-width: 0px;
    border-radius: 50px;
    height: 27px;
    width: 25px;
}
.number {
    color: black !Important;
    border-color: white !Important;
    padding: 3px !Important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="text-center">
    <ul class="pager">
        <li><a href="#" class="left-arrow">➜</a></li>
        <li><a href="" class="number">1</a></li>
        <li><a href="" class="number">2</a></li>
        <li><a href="" class="number">3</a></li>
        <li class="number">...</li>
        <li><a href="" class="number">7</a></li>
        <li><a href="" class="number">8</a></li>
        <li><a href="" class="number">9</a></li>
        <li><a href="" class="right-arrow">➜</a></li>
    </ul>
</div>

我已经使按钮成为我想要的正确的圆形，但现在按钮内的箭头移出了按钮圈。删除宽度高度属性时，这会得到修复，但按钮不是我想要的圆形。我怎么解决这个问题？内容不居中。

Answer 1

使用填充和线条高度，你可以得到你想要的.left-arrow添加这个

padding: 7px;
line-height: 1;

Answer 2

将padding-left: 7px;添加到.left-arrow

.pager > li > a {
    color: black !Important;
}
.pager > li > a.right-arrow {
    margin-left: 335px;
    box-shadow: 0px 0px 5px #9ecaed;
    border-width: 0px;
}
.pager > li > a.left-arrow {
    margin-right: 335px;
    box-shadow: 0 0 5px #9ecaed;
    border-width: 0px;
    border-radius: 50px;
    height: 27px;
    width: 25px;
    padding-left: 7px;
    
}
.number {
    color: black !Important;
    border-color: white !Important;
    padding: 3px !Important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="text-center">
    <ul class="pager">
        <li><a href="#" class="left-arrow">➜</a></li>
        <li><a href="" class="number">1</a></li>
        <li><a href="" class="number">2</a></li>
        <li><a href="" class="number">3</a></li>
        <li class="number">...</li>
        <li><a href="" class="number">7</a></li>
        <li><a href="" class="number">8</a></li>
        <li><a href="" class="number">9</a></li>
        <li><a href="" class="right-arrow">➜</a></li>
    </ul>
</div>