Я пытаюсь эмулировать панель вкладок с 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'> </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>
Но между открывающей вкладкой и закрывающей есть очень раздражающее пространство.
Как видите, я пробовал с отступами, пробелами и рамками, но не повезло.
РЕДАКТИРОВАТЬ:
Я попытался заменить промежутки на маленькую таблицу (одна строка, три <td> s), но это то же самое, только пространство между ними меньше.
Избавьтесь от строк новой строки между пролетами. Пример:
<div class='tab'>
<span class='tab_left'> </span><span class='tab_middle'>very very looong</span><span class='tab_right'> </span>
</div>
Новые строки подсчитываются как пробел в HTML.
Другим способом, кроме 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>
Другой вариант - использовать 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>
Получил эту идею благодаря этому ответу
трудно тестировать без изображений, но я добавил цвет фона и дисплей: встроенный в корневые вкладки. Попробуйте следующее:
<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'> </span>
<span class='tab_middle'>very very looong</span>
<span class='tab_right'> </span>
</div>
<div class='tab' style="background-color:Green;">
<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>
Вкладка средней, левой и правой также должна лежать влево.
njbairs правильный.
Другой вариант - использовать таблицу с свойством border-collapse: collapse;.
Еще одна проблема: в Internet Explorer 6.0 первый подход (прокрутки) не работает должным образом. При изменении размера окна IE сложит span, разбивая вкладку, а при подходе к таблице даже IE отправляет всю вкладку.