CSS - 获取跨度
我试图仿效与HTMLCSS - 获取跨度
标签栏，我想每个标签的宽度根据文本长度（也就是被设定摆脱空间），并在情况下自动换行超过屏幕宽度
我已经几乎实现了它
<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'> </span>
<span class='tab_middle'>very very looong</span>
<span class='tab_right'> </span>
</div>
<div class='tab'>
<span class='tab_left'> </span>
<span class='tab_middle'>another loooong tab</span>
<span class='tab_right'> </span>
</div>
<div style='clear:both'></div>
</div>
</body>
</html>
但是，有易拉环的图像和关闭一个之间一个非常恼人的空间...
正如你可以看到我已经尝试填充，间距和边界，没有运气...
- 编辑 我试图用一个小表（一行，三个TD）替换跨度，但它是同样，只有两者之间的空间较小...
摆脱跨度之间的换行符。示例：
<div class='tab'>
<span class='tab_left'> </span><span class='tab_middle'>very very looong</span><span class='tab_right'> </span>
</div>
换行符在HTML中计为空格。
难以测试没有图像，但我添加了背景颜色和显示：内联到根标签。请试试这个：
<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'> </span>
<span class='tab_middle'>very very looong</span>
<span class='tab_right'> </span>
</div>
<div class='tab' style="background-color:Green;">
<span class='tab_left'> </span>
<span class='tab_middle'>another loooong tab</span>
<span class='tab_right'> </span>
</div>
<div style='clear:both'></div>
</div>
</body>
</html>
不错的尝试，但空间仍然存在，在第一个选项卡上的红色和第二个绿色... – opensas 2010-03-25 23:16:57
标签中间，左边和右边也需要向左浮动。
njbair的回答是正确的。
另一种选择是使用一个表，border-collapse: collapse;属性。
另一个问题：在Internet Explorer 6.0中，第一种方法（跨度）无法按预期工作。当调整窗口大小时，IE会缠住跨度，打破选项卡，同时使用表格方法甚至IE向下发送整个选项卡。
的另一种方式，除了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>
这应该是公认的答案，因为它是做什么的OP是请求。 OP想要跨度之间的空间不被看到，并且接受的答案是从html中删除它。 – 2014-03-06 11:24:06
@HectorOrdonez人们一直在问meta是否应该有一个社区接受的答案，但它被拒绝了，主要是因为它是哪个答案适合OP最多而不是社区，但是社区答案是最有利的一个。所以不要打扰哪一个应该是被接受的答案;） – 2014-04-23 07:03:11
好评如潮。很难挑选哪个是两个弊端中较小的一个：CSS hack需要重复字体大小信息或HTML hack，这就像改变内容以实现所需的样式。 – 2014-07-17 23:02:44
另一种选择是使用性否定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
尝试添加空格：NOWRAP; – ant 2010-03-25 22:36:56
试了一下，它是一样的... – opensas 2010-03-25 23:18:51