Избавиться от пробелов между пролетами

Я пытаюсь эмулировать панель вкладок с 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'>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>

Но между открывающей вкладкой и закрывающей есть очень раздражающее пространство.

Как видите, я пробовал с отступами, пробелами и рамками, но не повезло.

РЕДАКТИРОВАТЬ:
Я попытался заменить промежутки на маленькую таблицу (одна строка, три <td> s), но это то же самое, только пространство между ними меньше.

Ответ 1

Избавьтесь от строк новой строки между пролетами. Пример:

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

Новые строки подсчитываются как пробел в HTML.

Ответ 2

Другим способом, кроме 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>

Ответ 3

Другой вариант - использовать nagative 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>

Получил эту идею благодаря этому ответу

Ответ 4

трудно тестировать без изображений, но я добавил цвет фона и дисплей: встроенный в корневые вкладки. Попробуйте следующее:

<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>

Ответ 5

Вкладка средней, левой и правой также должна лежать влево.

Ответ 6

Ответ на

njbairs правильный.

Другой вариант - использовать таблицу с свойством border-collapse: collapse;.

Еще одна проблема: в Internet Explorer 6.0 первый подход (прокрутки) не работает должным образом. При изменении размера окна IE сложит span, разбивая вкладку, а при подходе к таблице даже IE отправляет всю вкладку.