html - 由于里面的内容，在 anchor 标签的帮助下填充按钮似乎宽度不一样

Question

我试图在 anchor 标记的帮助下创建一些按钮。我已经设置了每个标签的填充以获得按钮外观。但是，由于按钮内的内容似乎大小不一，即使我添加了 box-sizing 属性。

HTML

<ul>
<li class="list-pad"><a class="link-bg" href="{{link}}">{{location}}</a> </li>
</ul>

CSS

.link-bg
{
    width:2em;
    padding: 0.417em 0.833em;
    box-sizing: border-box;
    color: white;
    background-color: #007AFF;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
}

Answer 1

要使它们大小相同，您必须更改 anchor 标记的 display 属性。

.link-bg
{
    width:2em;
    padding: 0.417em 0.833em;
    display: block;
    box-sizing: border-box;
    color: white;
    background-color: #007AFF;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
}

<ul>
<li class="list-pad"><a class="link-bg" href="#">{{location}}</a> </li>
  <li class="list-pad"><a class="link-bg" href="#">{{location.location}}</a> </li>
</ul>