Question

我正在组建一个简单的网站来编制我的DIY项目。我有一个标志，我想独自坐在头版。单击此图像将链接到主屏幕。我的链接正常工作，图像在封面页上很好地居中（大约800px宽）。我面临的问题是链接的可点击区域似乎延伸到我主屏幕的右边缘和左边缘。

目前，图片的代码如下：

img.cent_img
{
    margin: 0 auto;
    display: block;
    border: solid 3px #9966bb;
}
img.cent_img:hover
{
    margin: 0 auto;
    display: block;
    border: solid 3px #997777;
}
<a href="home.html"><img src="../images/logo.png" class="cent_img" alt="XXX"
TITLE="YYY" width="800" height="330"/></a>

有谁知道为什么链接可以在图像边缘之外点击？

N.B。它只能点击左/右。它在图像的上方和下方按预期运行。

Answer 1

这是因为您将图像居中，而不是链接。图像会在左侧和右侧创建边距，这些边距位于<a>标记内，使该区域可以点击。

将您的代码放入<div>，然后将<div>。

居中

实施例： http://jsfiddle.net/eW9V9/

#logo {
    width: 200px;
    height: 100px;
    margin: 0 auto;
    display: block;
}

#logo img
{
    border: solid 3px #9966bb;
}
#logo img:hover
{
    border: solid 3px #997777;
}

<div id="logo">
    <a href="home.html">
        <img src="http://www.google.com/images/srpr/logo11w.png" class="cent_img"         alt="XXX"
TITLE="YYY" width="200" height="100"/>
    </a>
</div>

图像为链接HTML

1 个答案: