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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/4743254/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 06:14:58  来源:igfitidea点击:

Setting a width and height on an A tag

htmlcsscross-browser

提问by Luke

Is it possible to set the width and height in pixels on an anchor tag? I'd like to have the anchor tag to have a background image while retaining the text inside the anchor.

是否可以在锚标记上以像素为单位设置宽度和高度?我想让锚标记具有背景图像,同时保留锚内的文本。

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

li a {
  width: 32px;
  height: 32px;
  background-color: red;
}
<li><a href="#">Something</a></li>

回答by Jared

You need to make your anchor display: blockor display: inline-block;and then it will accept the width and height values.

你需要让你的锚display: blockdisplay: inline-block;然后它将接受宽度和高度值。

回答by sarcastyx

You can also use display: inline-block. The advantage of this is that it will set the height and width like a block element but also set it inline so that you can have another a tag sitting right next to it, permitting the parent space.

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

You can find out more about display properties here

您可以在此处找到有关显示属性的更多信息

回答by Bradley

All these suggestions work unless you put the anchors inside an UL list.

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

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

Then any cascade style sheet rules are overridden in the Chrome browser. The width becomes auto. Then you must use inline CSS rules directly on the anchor itself.

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

回答by zzzzBov

It's not an exact duplicate (so far as I can find), but this is a common problem.

这不是完全重复的(据我所知),但这是一个常见问题

display:blockis what you need. but you should read the specto understand why.

display:block是你所需要的。但您应该阅读规范以了解原因。

回答by Pankaj Upadhyay

Below working for me

下面为我​​工作

display: block;
width: 100%;