html - 宽度和高度不适用于“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

关于浮动：左；

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

Answer 2

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

a { display: inline-block; }

保持它内联，但能够改变它的尺寸、填充、边距以及基本上你可以用“div”做的所有其他事情。

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

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