锚点中的填充无效

Question

我的锚文本没有使用填充，但悬停时填充有效。这就是为什么在悬停时我的网页结构会移动。请帮助。

- hussain nayani

---

请提供你的HTML和CSS代码，我们会进行检查。 - Siyah

锚标签是内联元素。内联元素不支持填充。您需要将其转换为块级元素。 - Dinesh Kanivu

@Deekey：是的，它可以：http://jsfiddle.net/LinkinTED/4d7q6gwp/ - GreyRoofPigeon

Answer 1

锚点链接（a 元素）是内联元素，不能设置填充。将它们设为内联块级元素可以解决此问题。

只需添加：

a
{
    display:inline-block;
}

- MoonDev

---

它们可以在左右两侧和顶部底部设置填充，但不会占用空间。 - Susheel Singh

哦，是的。我想说这个。 - MoonDev

Answer 2

锚点是一个内联元素，因此填充会起作用，但它不会占据顶部和底部的空间。元素会重叠。因此根据您的要求将其设置为inline-block或block。

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

- Susheel Singh

Answer 3

您需要将 display:block 或 display:inline-block 应用于锚链接。

- Vivek Kumar Bansal

Answer 4

只需在锚点标签上添加CSS display:block 即可。

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

- Mary Daisy Sanchez

---

为什么？即使没有那个也可以工作：http://jsfiddle.net/LinkinTED/4d7q6gwp/ - GreyRoofPigeon

它可以工作，但不会占用空间。再添加一行看看，它将重叠，因为它是一个内联元素。 - Susheel Singh

@LinkinTED 内联元素可以应用填充，但只有左右填充会影响周围的内容。请查看此链接：http://jsfiddle.net/vinith98/u79egvjm/ - Vinith Almeida

http://jsfiddle.net/4d7q6gwp/2/ - Susheel Singh

@VinithAlmeida：是的，没错。 - GreyRoofPigeon

Answer 5

由于您正在使用padding，我假设您还定义了background-color和可能的border。如果您正在使用border，请确保在所有状态下为链接设置相同的border-width；在您不想显示它的状态中，将其设置为与您的背景颜色相同的颜色。完成此操作后，当您悬停/点击它时，它将不会移动周围的文本。

- Canned Man

Answer 6

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

- ravi rathaur

---

一个用户标记了这个答案，认为它质量低劣，我正在审核它。我不会投票删除它，但是虽然这段代码可能回答了问题，但最好还是包含一些上下文来解释它的工作原理和原因。仅有代码的答案并不能教给任何人任何东西。 - Eric Brandt