CSS - 为什么我不能设置<a href>元素的高度和宽度？

Question

我正在尝试通过以下HTML标记创建CSS按钮：

<a href="access.php" class="css_button_red">Forgot password</a>

尽管我已经设置了类的高度和宽度，但最终它的大小还是不如中间的文本。

你可以在这里预览问题，www.matkalenderen.no 注意第一个按钮，那是一个表单按钮，它使用自己的类。起初，我试图在 CSS 按钮上使用相同的类，结果出现了同样的问题，所以我尝试将它们分成各自的类，以防止出现某种崩溃。但无论如何都没有用。

我错过了什么？

- Kenny Bones

Answer 1

正如其他人所说，默认情况下<a>是内联元素，而内联元素无法指定宽度或高度。你可以这样将其更改为块级元素：

像这样将其更改为块级元素：

a {
    display: block;
}

尽管设置为 display: block 时会像块状元素一样显示在文本周围的流之外，但更好的解决方案是使用 display: inline-block，具体取决于您的情况，这可能是两全其美的解决方案。

请查看 PPK 的文章了解详情。

此值的真正用途是当您想给内联元素设置宽度时。在某些情况下，一些浏览器不允许在实际的内联元素上设置宽度，但如果您切换到 display: inline-block，则可以设置宽度。

- nickf

---

哈哈！inline-block 对我解决了很多问题！当只使用display:block时，整个按钮都错位了。但现在，它遵循了表单按钮相同的流程 :) 谢谢！ - Kenny Bones

小心使用inline-block。它在浏览器中的支持并不一致。了解您的分析数据，并确保它在站点的所有统计显著浏览器中都能良好显示。值得注意的是，IE 6和7都缺乏坚实的inline-block支持。请参阅http://www.quirksmode.org/css/display.html#t03。 - kingjeffrey

@kingjeffrey Quirksmode指出，当inline-block应用于非本来就是内联的元素时，IE6和7才会出现问题。因此，将其应用于<a>标签不会有问题。 - nickf

好的，看起来工作正常 :) 尽管我在<a>元素上遇到了一些隐形边距的问题。但那可能是另一个问题 :) - Kenny Bones

Answer 2

由于默认情况下 <a> 是内联元素。在 CSS 中定义 a { display:block; }，高度和宽度设置将被应用。

当然，您可能不想将所有锚点标签声明为块级元素，因此根据需要按类或 ID 进行过滤。

- kingjeffrey

---

谢谢，我以为我已经尝试过了。现在突然间它起作用了。哎呀，这表明在编写CSS时拥有结构化思维是多么重要啊！ - Kenny Bones

Answer 3

我认为最合适的解决方案是使用display: inline-block;，这将允许您为元素设置height，并仍将其视为inline元素。

- Crozin