Wie entferne ich einen unerwünschten Platz in einem Tab-Menü?

Question

Ich benutze asp.net mvc und ich arbeite an einem Tab-Menü, das einen unerwünschten Abstand zwischen jeder Registerkarte anzeigt. Dies passiert nur, wenn ich jedes Bild-Tag in einer eigenen Zeile habe, anstatt alles in einem zu haben.

Die Top-Bilder sind auf einer eigenen Zeile der ist, was den unerwünschten Raum verursacht:

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

gegen die gewünschte Wirkung auf der unteren Hälfte des Bildes:

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

Wie kann ich diesen Raum loswerden, ohne alle auf einer Linie zu halten?

Answer 1

ich Ihre Registerkarte Bilder in einer ungeordneten Liste wie folgt enthalten würde:

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> 

diese Weise können Sie den Abstand Polsterung mit steuern kann oder Spanne.

Answer 2

eine Technik ist

<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

zu tun, da Sie wahrscheinlich die Registerkarten wollen anklickbar sein einige Elemente DIV zum Beispiel um die Bilder hinzufügen müssen. Stellen Sie sicher, dass diese Elemente keine Ränder haben und Sie können whitespace zwischen den divs in der Quelle kein Problem haben.

<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

Beliebiger Zwischenraum zwischen Tags, z.B. eine neue Zeile, werden als Leerzeichen interpretiert. Dies betrifft nur Inline-Elemente, die also Ihr Problem sind.

Sie könnten auch versuchen, float: left zu den Elementen hinzuzufügen, die sie horizontal ohne Abstand stapeln. Vermutlich werden Sie diese als Hyperlinks implementieren, wir müssten das genaue Markup sehen, um eine spezifische Lösung dafür vorzuschlagen.

Answer 5

Kurze Antwort: Entfernen Sie die Leerzeichen zwischen den img Tags und stellen Sie sicher, dass sie keine Ränder haben.

Wenn Sie nicht darüber, dass Leerzeichen im HTML stören wollen, einige Zeit dauern, bis sie float:left zu machen, in einem div enthalten (overflow:hidden wird seine Höhe korrekt erhalten).