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