宽度和高度不适用于'a'标签？

Question

我是css的新手并开始从事一些简单的项目。然而，我遇到了一个非常奇怪的问题造型按钮。以下代码不会产生链接：

<a href="#" style="width:240px; height:40px;"></a>

但由于某种原因，这将：

<a href="#" style="width:240px; height:40px; float:left;"></a>

我的问题基本上是，如何在世界范围内设置链接的大小而不必使用浮点数？为什么浮动会起作用？

谢谢！

Answer 1

<a href="#" style="width:240px; height:40px;background-color:blue;display:block;"></a>

这是因为'a'元素通常以内联方式显示。您可以使用display：block;

覆盖它

更多关于'显示'的信息：http://www.w3schools.com/cssref/pr_class_display.asp

关于float：left;

当向左浮动时，浏览器会自动将显示屏覆盖为块。

Answer 2

由于“a”是内联元素，因此必须将其显示为内联块

a { display: inline-block; }

保持内联但能够改变它的尺寸，填充，边距以及你可以用“div”做的其他一切。

inline-block存在IE7及更低版本的问题，因此您可能需要使用css“hack”：

a {
display: inline-block;
*display: inline; //* stands for IE7 and will not affect Chrome, Firefox and other browsers including IE8+
*zoom: 1;
}