CSS - 为什么我无法设置<a href>元素的高度和宽度?

Ken*_*nes 17 html css

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

<a href="access.php" class="css_button_red">Forgot password</a>
Run Code Online (Sandbox Code Playgroud)

但它最终并不比中间的文字大.尽管我已经设定了班级的高度和宽度.

你可以在这里预览问题顺便提一下,www.matkalenderen.no注意第一个按钮,这是一个表单按钮,它正在使用它自己的类.起初我也尝试在css按钮上使用相同的类,并且出现了同样的问题,所以我尝试将它们分成自己的类.万一发生了某种崩溃.但无论如何它并不重要.

我在这里错过了什么?

nic*_*ckf 46

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

a {
    display: block;
}
Run Code Online (Sandbox Code Playgroud)

虽然它会显示(不出所料)作为一个块,坐在它自己的周围文本流之外.一个更好的解决方案是display: inline-block根据您的情况使用哪个可能是两全其美的解决方案.

请参阅PPK关于它的文章.

当您想要为内联元素指定宽度时,实际使用此值.在某些情况下,某些浏览器不允许实际内联元素的宽度,但如果切换到display:inline-block,则允许设置宽度.


kin*_*rey 8

因为默认情况下<a>是内联元素.在CSS中a { display:block; },将应用定义和高度和宽度设置.

当然,您可能不希望将所有锚标记声明为块级元素,因此根据需要按类或id进行过滤.


Cro*_*zin 5

我认为最合适的解决方案是display: inline-block;允许您设置height仍将被视为inline元素的元素.