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

html css padding

30501 просмотра

6 ответа

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

Автор: opensas Источник Размещён: 13.11.2019 11:29

Ответы (6)

49 плюса

Решение

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

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

Автор: njbair Размещён: 25.03.2010 10:38

58 плюса

Другой способ, кроме 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>
Автор: Nikola K. Размещён: 11.07.2012 10:31

1 плюс

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

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

Автор: CodeGust Размещён: 05.09.2017 08:23

0 плюса

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

<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>
Автор: Cheddar Размещён: 25.03.2010 10:41

0 плюса

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

Автор: BigChrisDiD Размещён: 25.03.2010 10:46

0 плюса

Ответ njbair правильный.

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

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

Автор: opensas Размещён: 25.03.2010 10:56
Вопросы из категории :
32x32