Методы соединения элементов inline-block

Серия элементов со свойством inline-block достаточно часто используется при построении структуры страницы.  Но если использовать простое  форматирование, то между элементами стоящими рядом будет промежуток.

То есть структура:

<nav>
  <a href="#">Один</a>
  <a href="#">Два</a>
  <a href="#">Три</a>
</nav>

Со стилями:

nav a {
  display: inline-block;
  padding: 5px;
  background: red;
}

Будет выведена вот так:

Однако очень часто требуется, чтобы такие элементы располагались вплотную друг к другу. Особенно при организации навигационных меню, где такие пробелы могут портить всю визуальную структуру.

Таков принцип работы данных элементов, расположенных в одну строку. Логично, что между словами, расположенными в одну строку, присутствуют пробелы, не так ли? Промежутки между блоками являются такими пробелами. Вряд ли спецификацию будут изменять. Но такая особенность функционирования определенно генерирует большое количество ошибок при верстке страниц.

Ниже приводится несколько методов устранения пробелов между элементами со свойством inline-block, чтобы они размещались вплотную друг к другу.

 

Удаляем пробел

Причина заключается в том, что перевод строки и несколько символов табуляции считаются пробелом при выводе элементов в одну строку. Остается только удалить их.

Вот так:

<ul>
  <li>
   one</li><li>
   two</li><li>
   three</li>
</ul>

Или так:

<ul>
  <li>one</li
  ><li>two</li
  ><li>three</li>
</ul>

Или с помощью комментариев:

<ul>
  <li>one</li><!--
  --><li>two</li><!--
  --><li>three</li>
</ul>

Смешно, но работает!

 

Отрицательное значение поля

Можно сдвинуть элементы с помощью установки отрицательного значения для поля (конкретную цифру надо определять в зависимости от размера шрифта). Такой подход имеет проблемы в старых IE (6 & 7), но если данные браузеры исключены из списка поддержки, то можно сохранить код разметки без выше описанных ломок.

nav a {
  display: inline-block;
  margin-right: -4px;
}

 

Пропускаем закрывающий тег

HTML5 воспримет и такую структуру. Однако такой метод выглядит дико.

<ul>
  <li>one
  <li>two
  <li>three
</ul>

 

Устанавливаем нулевой размер шрифта

Размер пробела при свойстве font-size, имеющим значение 0, также будет нулевой ширины.

nav {
  font-size: 0;
}
nav a {
  font-size: 16px;
} 

 

Используем блочные элементы

Может быть, имеет смысл отказаться от использования строчных элементов в данном случае. Задача легко решается блочными элементами со смещением. Такой подход позволит устанавливать ширину, высоту и отступы. Однако вы не сможете центрировать их с помощью свойства text-align: center; в родительском элементе.


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/FYO5Wy34oMY/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Методы соединения элементов inline-block | | 2012-06-19 11:58:20 | | Статьи Web-мастеру | | Серия элементов со свойством inline-block достаточно часто используется при построении структуры страницы.  Но если использовать простое  форматирование, то между элементами стоящими рядом будет | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: