Get rid of spaces between spans_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-24 12:44 出处：网络

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.

相关专题：css padding

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'>&nbsp;</span>
        <span class='tab_middle'>very very looong</span>
        <span class='tab_right'>&nbsp;</span>
    </div>
  <div class='tab'>
        <span class='tab_left'>&nbsp;</span>
        <span class='tab_middle'>another loooong tab</span>
        <span class='tab_right'>&nbsp;</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.

Another way besides njbair's one is to add font-size: 0 to parent element. I prefer this one because it's aesthetically better for tab designing.

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>

Get rid of the newlines between the spans. Example:

<div class='tab'>
  <span class='tab_left'>&nbsp;</span><span class='tab_middle'>very very looong</span><span class='tab_right'>&nbsp;</span>
</div>

Newlines are counted as a space in HTML.

Another option is to use nagative letter-spacing:-10px - that has a lighter impact on formatting.

<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

hard to test without the images but I added background color and display:inline to the root tabs. Please try this:

<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'>&nbsp;</span>
        <span class='tab_middle'>very very looong</span>
        <span class='tab_right'>&nbsp;</span>
    </div>
  <div class='tab' style="background-color:Green;">
        <span class='tab_left'>&nbsp;</span>
        <span class='tab_middle'>another loooong tab</span>
        <span class='tab_right'>&nbsp;</span>
    </div>
    <div style='clear:both'></div>
</div>

</body>
</html>

Tab middle, left and right also need to float left.

njbair’s response is correct.

Another option was to use a table, with the border-collapse: collapse; property.

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.