文章/答案/技术大牛

发布

社区首页 >问答首页 >图像链接区延伸到图像外部

问图像链接区延伸到图像外部
EN

Stack Overflow用户

提问于 2013-10-24 02:14:35

回答 3查看 5.6K关注 0票数 3

我正在设计一个简单的HTML网站。我的问题是我的图片，我正在使用作为链接。我将它们放置在我想要的位置，但随后我注意到链接区域延伸到了图像的左侧。我在使用相对定位，并认为这可能与此有关，但我从我的网站上删除了所有CSS，但它仍然发生。我有一个严格的HTML页面，链接区域仍然延伸到图像的大小之外。

知道这是什么原因吗？

谢谢

<!DOCTYPE html>
<html>

<head>
    <title>Zach's Website</title>
    <link rel="stylesheet" type="text/css" href="css/grid.css">
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <!--<link rel="stylesheet" type="text/css" href="css/style.css">-->
    <link rel="stylesheet" type="text/css" href="css/screen.css" media="screen/projection">
    <link rel="stylesheet" type="text/css" href="css/print.css" media="print">
    <!--[if IE]> 
        <link rel="stylesheet" href="blueprint/ie.css" type="text/css"
        media="screen, projection"> 
    <![endif]-->




    <div id="header">
        <div class="container clearfix">
            <img id="headbanner" class="span-24" src="img/headerbanner.png">

            <a id="headerLogo" href="index.html"><img class="prepend-3" src="img/ZBLogoHeader.png"></a>
            <ul class="navigation">
                <li><a href="#">Experience</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Contact</a></li>                        
            </ul>
            <ul class="social">
                <li><a href="http://www.twitter.com/zachburns12" target="_blank"><img src="img/twitter.png"></a></li>
                <li><a href="https://www.facebook.com/zach.burns1" target="_blank"><img src="img/facebook.png"></a></li>
                <li><a href="http://www.anovelidea12.tumblr.com/" target="_blank"><img src="img/tumblr.png"></a></li>
                <li><a href="http://www.linkedin.com/pub/zach-burns/39/538/335/" target="_blank"><img src="img/linkedin.png"></a></li>
                <li><a href="http://www.github.com/zburns12" target="_blank"><img src="img/github.png"></a></li>
            </ul>

            <img id="bodyPattern" src="img/body.png">
        </div>
    </div>

</head>

<body>  

    <div id="project1" class="container clearfix">

        <a href="#"><img id="novel" class="prepend-2" src="img/ANovelIdea.jpg" onmouseover="this.src='img/hoverNovel.png'" onmouseout="this.src='img/ANovelIdea.jpg'" /></a>

        <a href="#"><img id="barminder" class="prepend-8" src="img/Barminder.jpg" onmouseover="this.src='img/hoverBar.png'" onmouseout="this.src='img/Barminder.jpg'" /></a>


    </div>

</body>
<footer>
    <div class="container clearfix">
        <img id="footerLogo" src="img/ZBLogoFooter.png">
        <img id="footerBanner" src="img/footerbanner.png">
    </div>
</footer>
</html>

hyperlink

html

css

web

回答 3

Stack Overflow用户

发布于 2013-10-24 02:24:38

您是否正在设置'a‘标签的高度/宽度？理想情况下，您应该设置height、width和display:block，以便'a‘标签具有其确切的大小。a{ display:block; height:100px; width:100px; }

票数 2

Stack Overflow用户

发布于 2016-01-06 15:46:13

这对我很有效。

<!-- HTML -->
<a href="#" title="logo"><img src="#" alt="logo image"></a>

/* CSS */
a {display: block; width: 50%;}
img {width: 100%;}

设置链接的宽度，然后将图像的宽度设置为链接宽度的100%。然后调整链接的宽度，直到图像达到所需的大小。这样，链接就不会超出图像的宽度。

票数 1

Stack Overflow用户

发布于 2017-09-08 03:33:26

所以...我偶然发现了这个因为我也有同样的问题。然后，当我在这里看不到答案时，我尝试了最后一次努力。我将包装在A标记中的所有图像设置为display: block；在CSS中。在此之前，A标记允许用户在图像右侧的远处单击，因为display: block；default造成了空白。请尝试内联显示：-block，因为它会导致链接强制自身下降到图像的边缘。希望这对你有用！

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/19549334

复制

相似问题

问图像链接区延伸到图像外部
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问图像链接区延伸到图像外部EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问图像链接区延伸到图像外部
EN