Избавиться от пробелов между пролетами
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'> </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>
с), но это то же самое, только пространство между ними меньше.
Ответы (6)
49 плюса
Избавьтесь от переносов между пролетами. Пример:
<div class='tab'>
<span class='tab_left'> </span><span class='tab_middle'>very very looong</span><span class='tab_right'> </span>
</div>
Новые строки считаются пробелом в HTML.
Автор: njbair Размещён: 25.03.2010 10:3858 плюса
Другой способ, кроме 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:230 плюса
трудно проверить без изображений, но я добавил цвет фона и отображение: встроенный в корневые вкладки. Пожалуйста, попробуйте это:
<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>
Автор: Cheddar
Размещён: 25.03.2010 10:41
0 плюса
Вкладка посередине, слева и справа также должна плавать влево.
Автор: BigChrisDiD Размещён: 25.03.2010 10:460 плюса
Ответ njbair правильный.
Другим вариантом было использование таблицы со border-collapse: collapse;
свойством.
Еще один момент: в Internet Explorer 6.0 первый подход (span) не работает должным образом. При изменении размера окна IE оборачивает слово, разбивая вкладку, в то время как при использовании табличного подхода даже IE отправляет вниз всю вкладку.
Автор: opensas Размещён: 25.03.2010 10:56Вопросы из категории :
- html Определить часовой пояс пользователя
- html Как определить, какой из указанных шрифтов был использован на веб-странице?
- html Как мне дать моим веб-сайтам значок для iPhone?
- html Как отключить автозаполнение браузера в поле веб-формы / теге ввода?
- html Как автоматически изменить размер текстовой области с помощью Prototype?
- html Как вы можете настроить номера в упорядоченном списке?
- css Создание закругленных углов с помощью CSS
- css Как я могу найти неиспользуемые изображения и стили CSS на веб-сайте?
- css Как заставить нижний колонтитул оставаться внизу веб-страницы?
- padding Как я могу дополнить строку в Java?
- padding WPF: сетка с полем столбца / строки / дополнением?
- padding Заполнение внутри входов разрывает ширину 100%
- padding Когда использовать margin vs padding в CSS
- padding Избавиться от пробелов между пролетами
- padding Winforms, создание отступов при использовании свойств Dock