42

我正在尝试用 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）替换跨度，但它是一样的，只是之间的空间更小。

4

6 回答 6

60

除了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>
于 2012-07-11T10:31:09.537 回答
55

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

<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 中算作空格。

于 2010-03-25T22:38:03.823 回答
1

另一种选择是使用 nagative 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>

感谢这个答案，得到了这个想法

于 2017-09-05T08:23:59.510 回答
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>
于 2010-03-25T22:41:15.550 回答
0

Tab 中间，左右也需要向左浮动。

于 2010-03-25T22:46:54.613 回答
0

njbair 的回答是正确的。

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

另一个问题：在 Internet Explorer 6.0 中，第一种方法（跨度）没有按预期工作。调整窗口大小时，IE wordwraps 跨度，打破选项卡，而使用表格方法，甚至 IE 发送整个选项卡。

于 2010-03-25T22:56:21.130 回答