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

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>

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

Answer 2

一种技术是做

    <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之间有空格没问题。

    <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

标签之间的任何空格，例如新行被解释为空格。这只会影响内联元素，＆lt; img＆gt;元素因此是你的问题。

您还可以尝试将float: left添加到将水平堆叠它们而没有任何间距的元素上。大概你实际上是将它们作为超链接来实现，我们必须看到确切的标记来为它建议一个特定的解决方案。

Answer 5

简短回答：删除img标记之间的空格，并确保它们没有边距。

如果您不想在HTML中使用空格，请花一些时间来制作float:left div，overflow:hidden（{{1}}将使其高度正确）