我正在尝试用 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)替换跨度，但它是一样的，只是之间的空间更小。
最佳答案
除了 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>
关于html - 摆脱跨度之间的空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2519923/