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

Question

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

之后也是如此

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

要使它们大小相同，您必须更改锚标记的 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>

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

The padding of buttons with the help of anchor tag does not seem to be of the same width because of the content inside

html

css

responsive-design