如何擺脫標籤菜單中不需要的空間？

我正在使用asp.net mvc，並且正在顯示每個選項卡之間不需要的空間的選項卡菜單上工作。只有當我將每個圖像標籤放在一行上時纔會發生這種情況，而不是將它們放在一起。如何擺脫標籤菜單中不需要的空間？

alt text

頂部圖像是對自己的線，是什麼原因造成的不必要的空間：

 <img src="/Content/Images/Reports_white.png"/> 
     <img src="/Content/Images/Audit_white.png"/> 
     <img src="/Content/Images/Messages_white.png"/> 
     <img src="/Content/Images/Admin_white.png"/>

與對圖像的下半部預期的效果：

 <img src="/Content/Images/Reports_white.png"/><img src="/Content/Images/Audit_white.png"/> ...

我怎樣才能擺脫這個空間，而不必將它們全部放在一條線上？

來源

2009-06-12 A Salcedo

清理您的標籤併爲您添加圖像。 – mmcdole 2009-06-12 15:33:27

我會包含一個無序列表你這樣的標籤圖像：

CSS：

ul.tabs 
{ 
list-style:none; 
padding:0px; 
margin:0px; 
} 

ul.tabs li 
{ 
padding:0px; 
margin:0px; 
float:left; 
}

HTML：

<ul class="tabs"> 
<li><img src="/Content/Images/Reports_white.png"/></li> 
<li><img src="/Content/Images/Audit_white.png"/></li> 
<li><img src="/Content/Images/Messages_white.png"/></li> 
<li><img src="/Content/Images/Admin_white.png"/></li> 
</ul>

這樣，你可以使用填充控制間距或保證金。

來源

2009-06-12 15:43:18 Charlie

一種技術是做

<img src="/Content/Images/Reports_white.png" 
    /><img src="/Content/Images/Audit_white.png" 
    /><img src="/Content/Images/Messages_white.png" 
    /><img src="/Content/Images/Admin_white.png"/>

來源

2009-06-12 15:34:55

既然你可能會想的選項卡可以點擊你需要添加一些元素DIV例如圖像周圍。確保這些元素沒有邊距，並且在源代碼中的div之間可以有空格沒有問題。

<div><img src="/Content/Images/Reports_white.png"/></div> 
    <div><img src="/Content/Images/Audit_white.png"/></div> 
    <div><img src="/Content/Images/Messages_white.png"/></div> 
    <div><img src="/Content/Images/Admin_white.png"/></div>

來源

2009-06-12 15:36:12 CtlAltDel

爲什麼圖片不可點擊？一個div標籤不是一個錨點......如果使用javascript事件，image標籤可以像div一樣引發這些事件。 – 2009-06-12 15:41:41

標籤之間的任何空間，例如，一條新的線，被解釋爲白色空間。這隻會影響內聯元素，因此這些元素都是您的問題。

您也可以嘗試將float: left添加到水平堆疊它們的元素，而沒有任何間距。推測你實際上將這些作爲超鏈接來實現，我們不得不看到確切的標記來爲它提供特定的解決方案。

來源

2009-06-12 15:38:42 roryf

簡短回答：刪除img標記之間的空格，並確保它們沒有空白。

如果您不想在HTML中留有空格，請花點時間讓它們在div（overflow:hidden將獲得其高度正確）中包含float:left。

來源

2009-06-12 15:40:17

如何擺脫標籤菜單中不需要的空間？

回答

相關問題