如何在CSS中将锚链环绕形状

Question

我对在CSS中将锚点环绕菜单形状有疑问。这是有问题的菜单：

由圆形组成的菜单，当然还有以正方形环绕的锚定元素（默认情况下）。

圆圈是这样组成的：

height: 3rem;
width: 3rem;
border-radius: 50%;
margin: 0 3rem !important;
display: inline-block !important;
cursor: pointer;
background-color: #005929;

如何使锚标签环绕列表项的形状而不是正方形/ li？

谢谢！

Answer 1

将您拥有的CSS分配给链接本身，而不是容器。请参见下面的示例。

a {
  height: 3rem;
  width: 3rem;
  border-radius: 50%;
  margin: 0 3rem !important;
  display: inline-block !important;
  cursor: pointer;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

.green {
  background-color: green;
}

ul {
list-style: none;
display: flex;
width: 50%;
}

<ul>
  <li>
    <a href="#" class="red"></a>
  </li>
  <li>
    <a href="#" class="blue"></a>
  </li>
  <li>
    <a href="#" class="yellow"></a>
  </li>
  <li>
    <a href="#" class="green"></a>
  </li>
</ul>