在A标签上设置宽度和高度

Posted 2021-04-13

是否可以在锚标记上设置像素的宽度和高度？我想让锚标签有一个背景图像，同时保留锚内的文本。

li {
  width: 32px;
  height: 32px;
  background-color: orange;
}

li a {
  width: 32px;
  height: 32px;
  background-color: red;
}

<li><a href="#">Something</a></li>

答案

你需要制作你的锚display: block或display: inline-block;，然后它将接受宽度和高度值。

另一答案

你也可以使用display: inline-block。这样做的好处是，它将像块元素一样设置高度和宽度，但也将其设置为内联，这样您就可以在其旁边放置另一个标记，允许父空间。

你可以找到更多关于display properties here的信息

另一答案

除非您将锚点放在UL列表中，否则所有这些建议都有效。

<ul>
    <li>
        <a>click me</a>>
    </li>
</ul>

然后在Chrome浏览器中覆盖任何级联样式表规则。宽度变为自动。然后，您必须直接在锚本身上使用内联CSS规则。

另一答案

这不是一个完全重复（据我所知），但这是一个common problem。

display:block是你需要的。但你应该read the spec理解为什么。

另一答案

以下为我工作

display: block;
width: 100%;