摆脱跨度之间的空间
Posted
技术标签:
【中文标题】摆脱跨度之间的空间【英文标题】：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'> </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>s）替换span，但都是一样的，只是之间的空间更小了。
【问题讨论】：
【参考方案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'> </span><span class='tab_middle'>very very looong</span><span class='tab_right'> </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'> </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>
【讨论】：
不错的尝试，但空间仍然存在，第一个选项卡为红色，第二个选项卡为绿色...以上是关于摆脱跨度之间的空间的主要内容，如果未能解决你的问题，请参考以下文章
如何摆脱 UITableViewStyleGrouped 部分上方的额外空间？
如何摆脱UITabBar中第一个和最后一个项目之前和之后的空间？