html - 如何摆脱选项卡菜单中不需要的空间？

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>

这样您就可以使用填充或边距来控制间距。