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
Padding not working in anchor
提问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-block
or block
based on your requirement.
Anchor 是一个内联元素,因此填充可以工作,但不会占用顶部和底部的空间。元素重叠。所以制作它inline-block
或block
根据您的要求。
<a href="#" style="display:block;padding:10px">Click here</a>
回答by Vivek Kumar Bansal
You need to apply either display:block
or display:inline-block
to the anchor link
您需要申请display:block
或display:inline-block
锚链接
回答by Mary Daisy Sanchez
Just add this CSS display:block
on 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-color
and maybe border
. If you are using a border
, make sure the same border-width
is 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>