如何摆脱标签菜单中不需要的空间？

Question

我正在使用asp.net mvc,我正在使用一个选项卡菜单,它在每个选项卡之间显示不需要的空格.这只发生在我将每个图像标记放在其自己的行上而不是将其全部放在一行中时.

顶部图像在它们自己的行上,这是导致不需要的空间的原因:

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

如何摆脱这个空间而不必将它们全部放在一条线上？

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>

这样,您可以使用填充或边距控制间距.