我正在尝试使用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)替换跨度,但它是相同的,只有较小的空间...
Nik*_* K. 58
除了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>
njb*_*air 49
摆脱跨度之间的换行.例:
<div class='tab'>
<span class='tab_left'> </span><span class='tab_middle'>very very looong</span><span class='tab_right'> </span>
</div>
换行符在HTML中计为空格.