CSS-为什么我不能设置< a href>的高度和宽度；元素? [英] CSS - Why am I not able to set height and width of <a href> elements?

问题描述

我正在尝试通过使用以下html标记来创建css按钮:

I'm trying to create css buttons by using the following html markup:

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

但是最终它不大于中间的文本.即使我已经设置了班级的高度和宽度.

But it ends up being not bigger than the text in the middle. Even though I've set the class's height and width.

您可以在此处预览问题，网址为www.matkalenderen.no 注意第一个按钮，它是一个表单按钮，并且正在使用它自己的类.最初，我也尝试在css按钮上使用相同的类，并且出现相同的问题，因此我尝试将它们分成各自的类.万一发生某种崩溃.但这没关系.

You can preview the problem here btw, www.matkalenderen.no Notice the first button, that's a form button and it's using it's own class. At first I tried to use the same class on the css button as well and the same problem appeared, so I tried to separate them into their own classes. In case there was some kind of crash. But it didn't matter anyway.

我在这里想念什么?

推荐答案

正如其他人所说，默认情况下<a>是一个内联元素，并且内联元素不能指定宽度或高度.您可以将其更改为如下所示的块元素:

As the others have said, by default <a> is an inline element, and inline elements can't specify a width or height. You can change it to be a block element like this:

a {
    display: block;
}

尽管它随后将(毫无意外地)作为一个块显示在周围的文本流之外，成为一个单独的块.更好的解决方案是使用display: inline-block，这可能是世界上最好的解决方案，具体取决于您的情况.

Though it will then display (unsurprisingly) as a block, sitting on its own, outside the flow of the surrounding text. A better solution is to use display: inline-block which might be a best-of-both-worlds solution depending on your situation.

请参见 PPK的文章.

此值的真正用途是当您要向内联元素赋予宽度时.在某些情况下，某些浏览器不允许在真正的内联元素上使用宽度，但是如果您切换到显示:inline-block，则可以设置宽度.

The real use of this value is when you want to give an inline element a width. In some circumstances some browsers don't allow a width on a real inline element, but if you switch to display: inline-block you are allowed to set a width.

这篇关于CSS-为什么我不能设置< a href>的高度和宽度；元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！