HTML/ CSS：A href 超出链接图像 - 如何避免？

Posted 2023-03-05

【中文标题】HTML/ CSS：A href 超出链接图像 - 如何避免？

【英文标题】：HTML/ CSS: A href exceeds linking image - how to avoid?

【发布时间】：2014-03-04 20:21:40

【问题描述】：

我在一行中放置了三个 html 元素 using inline-block：2 个链接到外部网站的图片（下图中的绿色框）和一个带有搜索表单和语言选择的 div-tag。

现在的问题是，在图片旁边 - 在它们的右侧 - 还有一个隐藏链接。为了使其可见，我在活动模式下设置了 text-decoration:underline 和蓝色背景（见图）。

如何将 a href 限制为仅图像？

HTML 代码如下所示：

<div id="logo">
<a href="http://website1.example">
    <img src="image1.gif">
</a>
<a href="http://website2.example">
    <img src="image2.gif">
</a>
<div id="headermodules">
    <form class="search" method="post" action="index.php">
        <input type="text" value="Suchen...">
    </form>
    <div id="languageselection">
        <ul class="languageselection">
            <li id="active_language">
                <a href="http://localhost:81/de/">Deutsch</a>
            </li>
            <li>
                <a href="http://localhost:81/en/">English
            </li>
        </ul>
    </div>
</div>
<span style="width: 100%;"></span>
</div>

CSS 看起来像这样：

#logo

position: relative;
height:129px;
text-align: justify;
z-index: 0;
border-top: 0px solid #000;

#logo  img 

display: inline-block;
vertical-align: middle;

#logo span

width: 100%;
height: 0;
display: inline-block;

#headermodules

display: inline-block;
vertical-align: middle;

【问题讨论】：

对每个li 使用background-image，而不是对嵌套在li 下的每个a 标签使用display: block;？你完全错了

@Mr. Alien 可以举个例子吗？ li 仅在第三个区块 (div id="headermodules") 中。我正在为a hrefs 包围的img 标签而苦苦挣扎。

【参考方案1】：

您应该将a 元素的样式设置为inline-block，而不是img。 img 应该是 display: block。我认为应该这样做。

#logo a  display: inline-block; 
#logo img  display: block;