摆脱跨度之间的空间答案

【问题标题】：Get rid of spaces between spans摆脱跨度之间的空间
【发布时间】：2011-01-31 23:20:15
【问题描述】：

我正在尝试用 HTML 模拟标签栏。

我希望根据文本长度（即没有固定宽度）设置每个选项卡的宽度，并在超出屏幕宽度的情况下自动换行。

我几乎做到了：

<html>
<head>

<style type="text/css">
    #myTabs .tab {
    float: left;
    }

    #myTabs .tab_middle {
        margin: 0;
        padding: 0;
        border: none;
    background-image:url('images/tabs/tab_middle.png');
    }

    #myTabs .tab_left {
        margin: 0;
        padding: 0;
        border: none;
        background-image:url('images/tabs/tab_left.png');
    }

    #myTabs .tab_right {
        margin: 0;
        padding: 0;
        border: none;
    background-image:url('images/tabs/tab_right.png');
    }

</style>

</head>

<body>

<div id="myTabs">
  <div class='tab'>
        <span class='tab_left'>&nbsp;</span>
        <span class='tab_middle'>very very looong</span>
        <span class='tab_right'>&nbsp;</span>
    </div>
  <div class='tab'>
        <span class='tab_left'>&nbsp;</span>
        <span class='tab_middle'>another loooong tab</span>
        <span class='tab_right'>&nbsp;</span>
    </div>
    <div style='clear:both'></div>
</div>

</body>
</html>

但是，在打开的标签图片和关闭的标签之间有一个非常烦人的空间。

如您所见，我尝试了填充、间距和边框，但没有成功。

编辑：
我尝试用一张小桌子（一行，三个<td>s）替换span，但都是一样的，只是之间的空间更小了。

【问题讨论】：

标签： html css padding

【解决方案1】：

另一种选择是使用否定的letter-spacing:-10px - 这对格式的影响较小。

<div id="tabs" style="letter-spacing:-10px;">
    <span id="mytab1" style="letter-spacing:1px;">Tab 1</span>
    <span id="mytab2" style="letter-spacing:1px;">Tab 2</span>
    <span id="mytab3" style="letter-spacing:1px;">Tab 3</span>
</div>

感谢this answer获得这个想法

【讨论】：

【解决方案2】：

njbair 的回答是正确的。

另一种选择是使用带有border-collapse: collapse; 属性的表格。

另一个问题：在 Internet Explorer 6.0 中，第一种方法（跨度）无法按预期工作。调整窗口大小时，IE 自动换行，打破标签页，而使用表格方法，IE 甚至会向下发送整个标签页。

【讨论】：

【解决方案3】：

除了 njbair 的另一种方法是将font-size: 0 添加到父元素。我更喜欢这个，因为它更适合标签设计。

而不是这个：

<div id="tabs">
    <span id="mytab1">Tab 1</span><span id="mytab2">Tab 2</span><span id="mytab3">Tab 3</span>
</div>

...我们可以使用这个：

<div id="tabs" style="font-size: 0;">
    <span id="mytab1">Tab 1</span>
    <span id="mytab2">Tab 2</span>
    <span id="mytab3">Tab 3</span>
</div>

...看起来更好:)

当然，不要忘记为标签定义实际字体大小。

编辑：
还有另一种去除空格的方法：添加 cmets。

例子：

<div id="tabs">
    <span id="mytab1">Tab 1</span><!--
    --><span id="mytab2">Tab 2</span><!--
    --><span id="mytab3">Tab 3</span>
</div>

【讨论】：

这应该是公认的答案，因为它可以满足 OP 的要求。 OP 希望不显示跨度之间的空格，并且接受的答案只是将其从 html 中删除。
@HectorOrdonez 人们一直在询问 meta 是否应该有社区接受的答案，但被拒绝了，主要是因为哪个答案最适合 OP 而不是社区，社区答案是然而，最赞成的一个。所以不要担心哪个应该是公认的答案;）
关于 cmets 的好建议。很难选择两个弊端中较小的一个：需要复制字体大小信息的 CSS hack 或感觉就像更改内容以实现所需样式的 HTML hack。
只是作为接受答案的作者插话。您会注意到 OP 每个选项卡使用 3 个跨度：一个用作左边缘，一个用作中间部分，一个用作右边缘。在这种情况下，他仍然可以将每个选项卡放在一个新行上，而不是在组成同一选项卡的跨度之间。
添加 cmets 会发生什么？

【解决方案4】：

摆脱跨度之间的换行符。示例：

<div class='tab'>
  <span class='tab_left'>&nbsp;</span><span class='tab_middle'>very very looong</span><span class='tab_right'>&nbsp;</span>
</div>

换行符在 HTML 中算作空格。

【讨论】：

【解决方案5】：

Tab 中、左、右也需要向左浮动。

【讨论】：

【解决方案6】：

没有图像很难测试，但我在根选项卡中添加了背景颜色和 display:inline。请试试这个：

<html>
<head>

<style type="text/css">
    #myTabs .tab {
        float: left;
        display:inline;
    }

    #myTabs .tab_middle {
        margin: 0;
        padding: 0;
        border: none;
    background-image:url('images/tabs/tab_middle.png');
    }

    #myTabs .tab_left {
        margin: 0;
        padding: 0;
        border: none;
        background-image:url('images/tabs/tab_left.png');
    }

    #myTabs .tab_right {
        margin: 0;
        padding: 0;
        border: none;
    background-image:url('images/tabs/tab_right.png');
    }

</style>

</head>

<body>

<div id="myTabs">
  <div class='tab' style="background-color:Red;">
        <span class='tab_left'>&nbsp;</span>
        <span class='tab_middle'>very very looong</span>
        <span class='tab_right'>&nbsp;</span>
    </div>
  <div class='tab' style="background-color:Green;">
        <span class='tab_left'>&nbsp;</span>
        <span class='tab_middle'>another loooong tab</span>
        <span class='tab_right'>&nbsp;</span>
    </div>
    <div style='clear:both'></div>
</div>

</body>
</html>

【讨论】：

不错的尝试，但空间仍然存在，第一个选项卡为红色，第二个选项卡为绿色...