消除跨度之间的空格 [英] Get rid of spaces between spans
问题描述
我正在尝试使用HTML模拟标签栏.
I'm trying to emulate a tab bar with HTML.
我希望根据文本的长度(即没有固定的宽度)设置每个标签的宽度，并在超过屏幕宽度的情况下进行自动换行.
I'd like the width of each tab to be set according to the text length (that is, no fixed width) and to word wrap in case it exceeds the screen width.
我几乎实现了它:
<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>
但是，开始标签和结束标签之间有一个非常烦人的空间.
But, there's a very annoying space between the opening tab image and the closing one.
如您所见，我尝试使用填充，间距和边框，但没有运气.
As you can see, I've tried with padding, spacing, and border, with no luck.
我尝试用一个小表(一行，三个<td>)替换跨度，但这是相同的，只是它们之间的空间较小.
I tried replacing the spans with a small table (one row, three <td>s), but it's the same, only the space between is smaller.
推荐答案
摆脱跨度之间的换行符.示例:
Get rid of the newlines between the spans. Example:
<div class='tab'>
<span class='tab_left'> </span><span class='tab_middle'>very very looong</span><span class='tab_right'> </span>
</div>
换行符被视为HTML中的空格.
Newlines are counted as a space in HTML.
这篇关于消除跨度之间的空格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
