Html 摆脱跨度之间的空间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2519923/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get rid of spaces between spans
提问by opensas
I'm trying to emulate a tab bar with HTML.
我正在尝试用 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.
我希望根据文本长度（即没有固定宽度）设置每个选项卡的宽度，并在超过屏幕宽度的情况下自动换行。
I've almost achieved it:
我几乎实现了：
<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.
如您所见，我尝试了填充、间距和边框，但没有成功。
EDIT:
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.
编辑：
我尝试用一张小桌子（一行，三个<td>s）替换跨度，但它是一样的，只是之间的空间更小。
回答by Nikola K.
Another way besides njbair's one is to add font-size: 0to parent element.
I prefer this one because it's aesthetically better for tab designing.
除了njbair的另一种方法是添加font-size: 0到父元素。我更喜欢这个，因为它更适合标签设计。
Instead of this:
取而代之的是：
<div id="tabs">
<span id="mytab1">Tab 1</span><span id="mytab2">Tab 2</span><span id="mytab3">Tab 3</span>
</div>
...we can use this:
...我们可以使用这个：
<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>
...which looks better :)
...看起来更好:)
Of course, don't forget to define your real font size for tabs.
当然，不要忘记定义标签的真实字体大小。
EDIT:
There's one more way to get rid of spaces: by adding comments.
编辑：
还有另一种去除空格的方法：添加注释。
Example:
例子：
<div id="tabs">
<span id="mytab1">Tab 1</span><!--
--><span id="mytab2">Tab 2</span><!--
--><span id="mytab3">Tab 3</span>
</div>
回答by njbair
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>
Newlines are counted as a space in HTML.
换行符在 HTML 中被视为一个空格。
回答by CodeGust
Another option is to use nagative letter-spacing:-10px- that has a lighter impact on formatting.
另一种选择是使用否定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>
Got this idea thanks to this answer
由于这个答案，有了这个想法
回答by Cheddar
hard to test without the images but I added background color and display:inline to the root tabs. Please try this:
没有图像很难测试，但我添加了背景颜色和 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>
回答by BigChrisDiD
Tab middle, left and right also need to float left.
Tab 中间，左右也需要向左浮动。
回答by opensas
njbair's response is correct.
njbair 的回答是正确的。
Another option was to use a table, with the border-collapse: collapse;property.
另一种选择是使用带有border-collapse: collapse;属性的表。
Another gotcha: in Internet Explorer 6.0, the first approach (spans) doesn't work as expected. When resizing the window, IE wordwraps the span, breaking the tab, while with the table approach even IE sends down the whole tab.
另一个问题：在 Internet Explorer 6.0 中，第一种方法（跨度）无法按预期工作。调整窗口大小时，IE 会自动换行跨度，打破选项卡，而使用表格方法，即使 IE 也会向下发送整个选项卡。
