为什么我的填充物不适用于锚点，尽管它适用于按钮？

Question

以该代码为例

.ul {
  list-style-type: none;
}

.li {
  display: inline-block;
  border: black solid 1px;
  margin-left: 20px;
}

.btn {
  padding: 20px;
  text-transform: uppercase;
}

<ul class="ul">
  <li class="li">
    <button class="btn">
      Button Here
    </button>
  </li>
  <li class="li">
    <a class="btn" href="#">
      Link Here
    </a>
  </li>
</ul>

我想在<a>上使用填充，但无法正常工作

我知道我可以在<li>上使用填充，但是它将无法正常工作，因为当我应用填充时，整个内容都无法单击，只有<a>部分可以使用

Answer 1

您可以在“ btn”类上添加一个内联块，以便可以在四个边上添加边距和填充。 与内联元素不同，您不能添加垂直填充。

.btn {
  padding: 20px !important;
  text-transform: uppercase;
  display: inline-block;
}