html - 如何在不影响按钮内容的情况下使按钮呈圆形？

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>

我已将按钮制作成我想要的正确圆形，但现在按钮内的箭头移出按钮圆圈。删除 width height 属性时会修复此问题，但按钮并不像我想要的那样圆。我怎么解决这个问题？内容未居中。

Answer 1

玩填充和行高你可以得到你想要的 .left-arrow 添加这个

padding: 7px;
line-height: 1;