html - 关于如何使用 CSS 使图像可点击的一些疑问

Question

我正在研究如何使用 HTML + CSS 创建无表格 Web 模板的教程，我对以下内容有一点疑问:

我有一个 header ，其中包含一个具有 id=logo 的 div，如下所示:

        <div id="header">    <!-- HEADER -->
            <div id="logo">     <!-- My Logo -->
                <h1><a href="#">My web site is cool</a></h1>
                <p id="slogan">
                    My web site is finally online
                </p>
            </div>
                            ......
                            OTHER HEADER STUFF
                            ......
        </div> <!-- Close header -->

与此 #header div(及其内容)相关，我有以下 CSS 代码:

/* For the image replacement of the logo */
h1 {
    background: url(../images/logo.jpg) no-repeat;
    text-indent: -9999px;
    width: 224px;
    height: 71px;
}

h1 a {
    display: block;
    width: 258px;
    height: 64px;
    text-decoration: none;
}

所以这段代码放了一张图片，而不是标签中的我的网站很酷文本。

我在理解 h1 a CSS 设置时遇到一些问题，在教程中说这个 CSS 设置 for h1 a:

转为block(from inline)header中链接的显示方式，这样我就可以设置宽高了，logo的图片现在可以点击了

这个东西我不是很清楚，有以下疑惑:

我是否必须将 a 元素(即内联元素)转换为 block 元素以赋予它与底层图像 (logo.jpg) 相同的尺寸？

谢谢

安德里亚

Answer 1

举个例子，

一个 a 元素默认是 inline ，所以如果你要做类似的事情

CSS

a {background:red; height:210px; width:200px;}

HTML

<a href="#">test</a>

您会注意到 width 和 height 属性不起作用。现在要使此元素的大小调整为该宽度，您需要将元素的显示属性设置为 display:block 或 display:inline-block

JSFiddle Demo Example

HTML:

<a href="#">Without display:inline block, width and height set.</a>
<br><br>
<a href="#" class="inline-block">With display:inline block, width and height set.</a>
<br><br>
<a href="#" class="block">With display:block, width and height set.</a>

CSS:

a {background:#ccc; height:210px; width:200px;}
.inline-block { display:inline-block; }
.block { display:block; }