Html 填充在锚中不起作用

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/25680521/
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 02:38:58  来源:igfitidea点击:

Padding not working in anchor

htmlcssanchorpadding

提问by hussain nayani

My text inside anchor is not taking padding, but padding applies when it's hovered. That's why on hover my web structure is just moving. Please help.

我在锚点内的文本没有填充,但是当它悬停时填充适用。这就是为什么在悬停时我的网络结构只是在移动。请帮忙。

回答by MoonDev

Anchor links or 's are inline elements, they can't have paddings. Making them inline-block must work.

锚链接或 's 是内联元素,它们不能有填充。使它们内联块必须工作。

Just add:

只需添加:

a
{
    display:inline-block;
}

回答by Susheel Singh

Anchor is an inline element so padding will work but it will not take up the space on top and bottom. Elements get overlapped. So make it inline-blockor blockbased on your requirement.

Anchor 是一个内联元素,因此填充可以工作,但不会占用顶部和底部的空间。元素重叠。所以制作它inline-blockblock根据您的要求。

<a href="#" style="display:block;padding:10px">Click here</a>

回答by Vivek Kumar Bansal

You need to apply either display:blockor display:inline-blockto the anchor link

您需要申请display:blockdisplay:inline-block锚链接

回答by Mary Daisy Sanchez

Just add this CSS display:blockon your anchor tag

只需display:block在您的锚标记上添加此 CSS

<a href="#" style="display:block; padding:4px ">Click here</a>

回答by Canned Man

Since you are using padding, I am assuming you also have a defined background-colorand maybe border. If you are using a border, make sure the same border-widthis set for the link in all states; in the states you don't want it to show, set it the same colour as your background. When you've done this, it will not move the text around it when you hover/click on it.

由于您正在使用padding,我假设您也有一个定义的background-color并且可能border. 如果您使用的是border,请确保border-width为所有状态的链接设置相同;在您不希望它显示的状态下,将其设置为与背景相同的颜色。完成此操作后,当您悬停/单击它时,它不会移动它周围的文本。

回答by ravi rathaur

<a href="#" class="btn btn-info" role="button">button</a>