css - 消除跨段之间的空间 [英] css - get rid of spaces between spans
问题描述
我试图用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'>& nbsp;< / span>
< span class ='tab_middle'>非常非常looong< / span>
< span class ='tab_right'>& nbsp;< / span>
< / div>
< div class ='tab'>
< span class ='tab_left'>& nbsp;< / span>
< span class ='tab_middle'>另一个不显眼的标签< / span>
< span class ='tab_right'>& nbsp;< / span>
< / div>
< div style ='clear：both'>< / div>
< / div>
< / body>
< / html>
但是，打开标签图像和关闭标签图像之间有一个非常讨厌的空间...
正如你所见，我已经尝试过填充，间距和边框，没有运气...
- 编辑
我尝试用一个小表（一行，三个TD）替换的跨度，但它是相同的，只是之间的空间更小...
删除跨度之间的换行符。示例：
< div class ='tab'>
< span class ='tab_left'>& nbsp;< / span>< span class ='tab_middle'>非常非常looong< / span>< span class ='tab_right'> & nbsp;< / span>
< / div>
换行符被计为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
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 TDs) 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>
Newlines are counted as a space in HTML.
这篇关于css - 消除跨段之间的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
