Question

我正在尝试使用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）替换跨度，但它是相同的，只有两者之间的空间更小......

Answer 1

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

Answer 2

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

<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中计为空格。

Answer 3

另一个选择是使用对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> - 对格式化的影响较小。

  ggplot(df, aes(x = a, y = b)) +
  geom_point(aes(col = Changed)) +
  geom_point(aes(col = Significant)) +
  scale_color_manual(values = c("green", "red","grey", "grey")) +
  theme_bw(base_size = 12) + theme(legend.position = "bottom")

感谢this answer

Answer 4

没有图像很难测试，但我添加了背景颜色和显示：内联到根选项卡。请试试这个：

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

Answer 5

标签中间，左侧和右侧也需要向左浮动。

Answer 6

njbair的回答是正确的。

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

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

css - 摆脱跨度之间的空间

6 个答案: