HTML/CSS：href超過鏈接圖像 - 如何避免？

我把三個HTML元素連成一排using inline-block：連接到外部網站的2個圖像（下圖中的綠色框）和一個帶搜索表單的div標籤作爲語言選擇。HTML/CSS：href超過鏈接圖像 - 如何避免？

現在的問題是，旁邊的圖像 - 右側 - 還有一個隱藏的鏈接。爲了使其可見，我設置了文字修飾：加下劃線，並在主動模式下爲藍色背景（請參閱圖像）。

我怎麼能限制一個HREF只圖像？

Problem: a href link exceeds image which it was meant for

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

來源

2014-02-07 K B

通過使用'背景image'for每個'li'和比使用'顯示：塊;'每個''下嵌套li' A'標記？你做錯了 –

@ Alien先生你能舉個例子嗎？ 'li'只在第三個塊中（'div id =「headermodules」'）。我正在用'href's包圍的'img'標籤來拼湊。 –

你應該有風格，以inline-block，而不是img的a元素。 img應該是display: block。我認爲應該這樣做。

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

來源

2014-02-07 12:32:55 jondro

這對我來說。太好了，非常感謝！ –

HTML/CSS：href超過鏈接圖像 - 如何避免？

回答

相關問題