HTML / CSS：href超过链接图像 - 如何避免？ [英] HTML/ CSS: A href exceeds linking image - how to avoid?

问题描述

我将三个HTML元素连续放入使用内联块：2个链接到外部网站的图片（下面图片中的绿色框）和一个div标签，搜索框是一种语言选择。

I put three HTML-elements in a row using inline-block: 2 images linking to external websites (green boxes in the image below) and one div-tag with a search-form an a language selection.

现在的问题是，在图像旁边 - 在它们的右边 - 还有一个隐藏的链接。要使其可见，请在活动模式下设置 文本装饰：下划线和蓝色背景（见图片）。

The problem is now, that next to the images - on their right sides - there is also a hidden link. To make it visible I set text-decoration:underline and a blue background in active mode (see image).

如何将 href 仅限于图片？

How can I limit the a href to only the images?

HTML代码如下所示：

HTML code looks like that:

<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看起来像这样：

The CSS looks like that:

#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;
}

推荐答案

c $ c> a 元素样式为 inline-block ，而不是 img 。 img 应为 display：block 。我认为应该这样做。

You should have the a elements styled to inline-block and not the img. The img should be display: block. I think that should do it.

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

这篇关于HTML / CSS：href超过链接图像 - 如何避免？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！