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

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

37 голосов
/ 26 марта 2010

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

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

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

EDIT:
Я попытался заменить пролеты небольшой таблицей (одна строка, три <td> с), но это то же самое, только пространство между ними меньше.

Ответы [ 6 ]

58 голосов
/ 11 июля 2012

Другой способ, кроме 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>
49 голосов
/ 26 марта 2010

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

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

1 голос
/ 05 сентября 2017

Другим вариантом является использование отрицательного значения 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>

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

0 голосов
/ 26 марта 2010

Правильный ответ njbair.

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

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

0 голосов
/ 26 марта 2010

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

0 голосов
/ 26 марта 2010

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

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