消除span标签之间的空格

Question

消除span标签之间的空格

44

我试图用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>）替换掉span，但是情况一样，只是它们之间的空隙更小了。

- opensas

6个回答

56

去掉span标签间的换行符。例如：

<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 中，换行被计算为一个空格。

- njbair

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>

得到这个想法要感谢这个答案

- CodeGust

0

没有图片很难测试，但我已经为根标签添加了背景颜色和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>

- Cheddar

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

0

选项卡的中间、左侧和右侧也需要向左浮动。

- BigChrisDiD

0

njbair的回答是正确的。

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

另一个需要注意的地方是，在Internet Explorer 6.0中，第一种方法（跨度）不像预期的那样工作。当调整窗口大小时，IE会换行跨度，打破制表符，而使用表格方法，即使是IE也会发送整个制表符。

- opensas

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nikola K. · Accepted Answer

除了 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>

哪种看起来更好 :)

当然，别忘了为选项卡定义真正的字体大小。

编辑:
还有一种方法可以消除空格：添加注释。

例如：

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