タブメニューの不要なスペースを取り除くにはどうすればいいですか？

Question

私はasp.net mvcを使用していますが、各タブ間に不必要なスペースを表示しているタブメニューに取り組んでいます。これは、すべての画像タグを1つにまとめるのではなく、独自の行に各画像タグがある場合にのみ発生します。

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

：画像の下半分に所望の効果対

 <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"/> 

：

上部画像は不要な空間を引き起こしているものであり、自分のライン上にあります

このスペースをすべて1行にまとめる必要はありません。

Answer 1

私はこのような順序なしリストにあなたのタブ画像が含まれていると思います：

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> 

その方法やマージン。

Answer 2

1つの技術は、あなたはおそらく、タブを使用すると、画像の周りに、たとえばいくつかの要素をDIV追加する必要がありますクリッカブルになりたいので

<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"/> 

Answer 3

を行うことです。これらの要素にはマージンがないことを確認し、ソース内の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> 

Answer 4

タグ間の任意のスペース。新しい行は空白として解釈されます。これは実際にインライン要素に影響するだけです。< img>要素はあなたの問題です。

また、間隔を空けずに水平に積み重ねる要素にfloat: leftを追加することもできます。実際にはこれらをハイパーリンクとして実装していると思われますが、具体的なソリューションを提案するには正確なマークアップを確認する必要があります。

Answer 5

短い回答：imgタグ間のスペースを削除し、余白がないことを確認してください。

HTMLにスペースがあることを気にしたくない場合は、div（overflow:hiddenの高さになる）に含まれるfloat:leftに時間をかけてください。