Ul li горизонтально css – Как разместить элементы списка горизонтально или горизонтальное меню с помощью CSS | Дропшиппинг

Содержание

Основные приемы размещения блоков (div) горизонтально при помощи CSS.

Часто на практике приходится решать задачу группирования и выравнивания контента средствами CSS. Сегодня мы рассмотрим основные способы размещения элементов в горизонтальный ряд.

Материал данной статьи призван помочь начинающим веб-дизайнерам в освоении приемов верстки web-страниц.

Из чего выбрать или методы

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

метод «Float»
метод «Inline-block»
метод «Table-cell»

Каждый из них имеет свои преимущества, области применения и недостатки. Рассмотрим их по порядку.

«Для рывка» или немного теории

Все структурные элементы HTML можно условно разделить на:

Инлайновые (встроенные) – типа img, span и им подобные. У нас нет возможности менять их фон и задавать им произвольные линейные размеры.

Блочные – занимающие всю ширину родительского блока, всегда начинаются с новой строки – p, h, div.

Наглядный пример встроенных и блочных структур приведен ниже:

Метод «Float»

Как уже известно (см. выше), блочный элемент размещается с новой строки вне зависимости от заданной ему ширины (width). По этому, уменьшая горизонтальный размер div-а, в рядок блочки не построить.

Наиболее популярный (особенно среди начинающих верстальщиков), метод решения это использование свойства float.

CSS свойство float обрело большую популярность и практическую ценность после перехода от табличного способа верстки к блочному.

Float: left (right) трансформирует блочный элемент в плавающий, выравнивает по левому (правому) краю родительского блока и устанавливает обтекание справа (слева) текстом и другими элементами.

Для примера, создадим четыре блока, которые нужно разместить в ряд:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" media="all" type="text/css" href="style.css" />
    </head>
    <body>
        <div>Строим</div>
        <div>горизонтальный</div>
        <div>ряд</div>
        <div>из дивов</div>
    </body>
</html>

И внешнюю таблицу стилей с следующим содержимым:

div {
     float: left; /*Задаем обтекание*/
     line-height: 120px;/*Высота строки +  верт. центрирования текста*/
     font-size: 40px;
     background: dodgerblue;
     color: white;
     margin-top: 60px;
     width: 320px; /*Фиксируем ширину блока*/
     margin-right: 10px;
     text-align: center; /*Центрируем текст по горизонтали*/
    }

В результате получаем четыре блока, расположенные в горизонтальный ряд и выровненные по левому краю родительского блока:

Иногда на практике бывает необходимо выровнять блоки по правому краю родительского элемента. Изменим обтекание блоков в предыдущем примере:

Обратите внимание на надписи, расположенные в блоках. На первый взгляд может показаться, что пример отработал криво. Но на самом деле, браузер обработал код правильно: прочитал блоки сверху вниз, и сделал то, что мы от него просили — выровнял по правому краю. Учтите этот момент при использовании свойства float: right.

Для того, чтобы прервать обтекание элементов с какого-то конкретного места, используйте строчку:

<div></div>

В рассмотренном выше примере расстояния между блоками мы задавали при помощи отступа

margin-right. Но что делать, если у вас при верстке страницы возникла задача: разместить блоки в ряд, центрировать их, да и еще чтобы отступы были только между ними, но никак не снаружи?

Алгоритм действий следующий.

HTML:

<div> <!--Создаем дополнительную обертку-родительский элемент -->
            <div>Строим</div>
            <div>горизонтальный</div>
            <div>ряд</div>
            <div>из дивов</div>
</div>

CSS:

.wrap {
         width: 1310px;/*фиксируем ширину обертки*/
         margin: 0 auto;/*центрируем ее*/
         background: darkgray;
         height: 120px;/*Задаем высоту обертки*/
        }
 
.bblock {
        float: left; /*Задаем обтекание*/
        line-height: 120px;/*Высота строки +  верт. центрирования текста*/
        font-size: 40px;
        background: dodgerblue;
        color: white;
        width: 320px; /*Фиксируем ширину блока*/
        margin-right: 10px;
        text-align: center; /*Центрируем текст по горизонтали*/
}
.wrap :last-child {
        margin-right: 0px;/*Убираем поле последнего div-а*/
                       }

В результате получаем такую картину:

Ну что же, всех практических ситуаций не рассмотришь, по этому перейдем к общим особенностям.

Важно!!!

Ширина блоков должна быть фиксированной. Иначе получите что-то такое:
При уменьшении размера родительского блока или окна веб-браузера, не вмещающиеся блоки перемещаются вниз друг под дружку. Чтобы исключить такой косяк, примените свойство min-width.
Не забывайте указывать !DOCTYPE вашего документа, иначе, при отображении страницы в IE, применив описанный выше метод горизонтального размещения блоков, у вас появится отступ справа порядка 17px (наверное разработчики под скролл разметили).

Во избежание различий отображения страницы в разных браузерах, некоторые веб-мастера рекомендуют задавать точные значения свойств margin и padding для body.
В отличии от метода «Inline-block» вы не столкнетесь с наличием зазора между блоками при отсутствии margin-ов.
Для задания отступов и полей при размещении элементов воспользуйтесь свойствами margin и padding.

Метод «Inline-block»

Как строчные так и блочные элементы имеют свои преимущества и недостатки в контексте каждой конкретной решаемой задачи. А что если объединить их преимущества?

Встречайте, гвоздь программы – свойство display: inline-block.

display: inline-block генерирует блочно-строчный элемент, который по сути является строчным, но сохраняет блочные свойства – позволяет изменять линейные размеры, задавать поля, отступы и т.д.

Блочно-строчный элемент имеет следующие свойства:

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

Рассмотрим пример создания простого навигационного меню, содержащего картинку и ссылку.

HTML:

        <div>
            <p><img src="./vaden-pro-logo.png" alt=""  /></p>
            <p><a href="#">Ссылка меню 1 длиннее обычного</a></p>
        </div>
        <div>
            <p><img src="./vaden-pro-logo.png"  alt="" /></p>
            <p><a href="#">Ссылка меню 2</a></p>
        </div>
        <div>
            <p><img src="./vaden-pro-logo.png"  alt="" /></p>
            <p><a href="#">Ссылка меню 3</a></p>
        </div>
        <div>
            <p><img src="./vaden-pro-logo.png"  alt="" /></p>
            <p><a href="#">Ссылка меню 4</a></p>
        </div>

CSS:

.nav {
	display: inline-block; /*Задаем блочно-строчное отображение*/
  	width: 180px; /*задаем ширину блока*/
	background: dodgerblue;
        }
 
        .string {
         text-align: center; /*Равняем текст по-горизонтали*/
        }

В результате получаем такую менюшку:

Как видим, получилось кривовато… Но расстраиваться мы не намерены, по-этому применяем к нашим дивам CSS свойство vertical-align (подробнее см. ниже):

Теперь наша навигационная панель выровнялась по верхней линии:

Конечно, приведенный пример является примитивным, но я уверен, что на его основе вы сможете создать настоящий шедевр!!!

Важно!!!

При уменьшении ширины окна обозревателя невмещающийся элемент перемещаеться вниз (как в случае float: left)
Элемент, отображаемый как inline-block чувствителен к пробелам. Это приводит к тому, что даже при нулевых значениях margin между блоками будет зазор. Зазор этот зависит от применяемого шрифта. Для примера рассмотрим список:
HTML:
```
 <ul>
           <li>Зазор</li>
           <li>между</li>
           <li>блоками</li>
</ul>
```
CSS:
```
li {
        display: inline-block; 
   	width: 180px;
 	background: darkgrey;
        color: gold;
        line-height: 120px;
        font-size: 32px
        text-align: center;
        }
```
Результатом рендеринга такого кода будет следующая картина:

Есть несколько способов убрать зазоры:
- подобрать отрицательные значения margin:
- указать font-size: 0 для родительского блока и font-size ≠0 для инлайнового;
```
        ul { font-size: 0px;}
        li {font-size: 32px;}
```
- не очень красиво, но все же… Написать код в одну строчку
```
<li>Зазор</li><li>между</li><li>блоками</li>
```
Результатом применения любого из выше перечисленных приемов будет следующая структура:
Если у вас несколько блочно-строчных элементов подряд имеют разную высоту, то им необходимо задать свойство vertical-align: top. Напомню, что по умолчанию vertical-align присвоено значение baseline.
Кросс-браузерность.

Для древних версий Firefox добавляем строчку:
```
display: -moz-inline-stack;
```
и оборачиваем элемент в дополнительную div-обертку.

IE 7 и более ранние версии — добавляем строчки:

 zoom: 1; /*задаем hasLayout*/
*display: inline; /*звездочка – хак для IE */
_height: 250px; /*в IE6 не работает min-height*/

Замечу, что на указанные строчки избирательно реагируют конкретные браузеры (на первую – Firefox, на остальные — IE).

Метод «Table»

Табличный подход долгое время был стандартом верстки, что в первую очередь объяснялось простотой и интуитивной понятностью разметки. Скорее всего, именно это и послужило причиной появления табличного форматирования в CSS.

Свойства display: table (table-cell, inline-table), позволяют выполнять табличное форматирование элементов без применения HTML таблиц.

Для горизонтального размещения блоков нам понадобится родительский элемент, имеющий свойство display: table, и дочерние элементы (ячейки), имеющие свойство display: table-cell:

<div>
  <div>Строим</div>
  <div>табличный</div>
  <div>ряд</div>
  <div>из дивов</div>
  </div>

.bblock {
	display: table-cell; 
        font-size: 32px;
  	width: 200px;
        height: 200px;
	background: gold;
        text-align: center;
        vertical-align: middle;
}
 
.wrap {
  display: table;  
  border-spacing: 20px 20px; 
  background-color: darkgray;
}

Важно!!!

В отличии от методов «Inline-block» и «float», при уменьшении ширины окна веб-браузера, ячейки не перемещаются вниз.
У вас нет возможности задавать свойство margin для ячеек псевдотаблицы.
Кросс-браузерность. Свойства из семейства display: table* не поддерживаются IE6, IE7. Кроме того, в IE8 вы можете наблюдать динамическую ошибку рендеринга псевдотабличных элементов в виде рандомно пропадающих ячеек. Данная ошибка чаше всего проявляется при первичной прорисовке документа

Оценок: 35 (средняя 4.5 из 5)

CSS: создание горизонтального меню | СХОСТ блог

Для того, чтобы создать горизонтальное меню, вам нужно добавить в HTML-документ блок <div> с нумерованным списком внутри. При этом одному из пунктов необходимо присвоить id. Уточним, что символ “#” означает адрес ссылки. Например:

<html>

<head>

<meta charset=»utf-8″>

<title>Горизонтальное меню</title>

<link rel=»stylesheet» type=»text/css» href=»style.css»>

</head>

<body>

<div>

<ul>

<li><a href=»#»>О компании</a></li>

<li><a href=»#»>Продукция</a></li>

<li><a href=»#»>Каталог товаров</a></li>

<li><a href=»#»>Видеогалерея</a></li>

<li><a href=»#»>Контакты</a></li>

</ul>

</div>

</body>

</html>

Поле этого нужно сделать несколько действий:

#menu ul li {

display: inline;

}

Создать горизонтальную линию на странице, где будут отображаться пункты горизонтального меню. Обязательно укажите расстояние от края страницы:

#menu ul {

border-bottom:2px solid #000000;

margin-left:0;

padding:4px 0;

}

Создать прямоугольные “окошки”, в которых будут размещены пункты меню. Кроме того нужно указать внутреннее растояние:

#menu ul li a {

text-decoration:none;

margin-left:3px;

border:1px solid #000000;

padding: 3px 4px;

border-bottom:0;

background:#CEDEFF;

}

#menu ul li a:link {

color:#493;

}

#menu ul li a:visited {

color:#647;

}

#menu ul li a:hover {

color:#000;

background:#6699FF;

border-color:#227

}

#menu ul li a#nowopen {

background:#fff;

border-bottom: 1px solid #fff;

}

При необходимости вы можете выровнять горизонтальное меню по центру, использовав соответствующее правило CSS:

#menu {

margin:0 25% 0 25%;

}

Горизонтальное меню в браузере:

Как сделать список li и ul в две колонки CSS

Если у вас на сайте прописаны элементы списка li и ul, где нужно вывести в 2 колонки, то все можно вывести через стиль CSS стилизацию. Рассмотрим все на примере одной функций, что можно встреть на ресурсах в материале, это Похожие материалы. На них как раз все создавал и все отлично получилось. Также не забываем, что когда изменение произойдет, то нужно корректно все вписать в основной дизайн, где отлично справятся свойства margin и padding, что к стилям прикрепить можно и потом по пикселям и процентам все вывести по центру или сделать одинаковые отступы.

Так как множество есть функций на этих элементах, то иногда зайдешь на интернет ресурс, то смотришь все в одну колону установлено, а по правую сторону много места остается, то как раз здесь можно больше материала разместить и место не будет пустовать, а на нем разместится информация.

Сделать HTML список UL LI в две колонки при помощи CSS

Берем за основу стандартный и безусловно самый актуальный список.

Код

<ul>
  <li>Сайт ZORNET.RU</li>
  <li>Скрипты сайта</li>
  <li>Шаблоны сайта</li>
  <li>Дизайн портала</li>
  <li>Скрипты и шаблоны</li>
  <li>Все для сайта uCoz</li>
</ul>

Как установили его, то здесь нужно добавить стиль, который выведет темы в колонки.

Код

.zornet_ru li {display:block;width:49%;float:left;}

Чтоб понятно было, все проверил на работоспособность.

По умолчанию идет:

При добавление стиля и правкой свойствами свойставя margin и padding все стало совершенно по другому.

Так вы быстро можете решить задачу, что визуально по другому смотрится и как видим, в два раза больше несет информационный поток под читабельность.

«Загадочные отступы» между инлайн-элементами — CSS-LIVE

Каждому, даже самому «молодому» верстальщику известны неприятности (проблемы) с интервалом между элементами, пробелами, которые вставляются между словами. Эти пробелы часто мешают нам при вёрстке того или иного блока. Избавиться от них бывает не так-то просто, а зачастую эти межсловные расстояния и вовсе ставят нас перед выбором, выбором способа решения данной проблемы.

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

Для начала мне хотелось бы пояснить, что же такое inline-block и почему все решения мы будем обсуждать именно с этим значением.

inline-block

Значит, inline-block — представляет собой этакую «коробочку», в которой содержатся буковки, т.е. некий коробок со спичками. Этот коробок представляет из себя блок, с поведением строки, т.е. по сути является строчно-блочным элементом.
Строчное поведение inline-block позволяет ему оставаться в одной строке с другими строчными элементами, например <span>-ом или попусту сливаться с обычными буквами, т.е. вести себя, как текст в строке. Ну а благодаря своим блочным способностям, inline-block-у можно смело задавать любые свойства, которые присущи блочным элементам: ширину, высоту, верхний и нижний margin, например, уже будет действовать, как у блоков.
Ну и т.д., в общем, эдакий «блок-строка»

Живой пример

Как видно из примера, inline-block чувствует высоту и ширину, которую мы ему прописали. Так же можно заметить одну интересную штуку, наш подопечный выровнялся по вертикали, выровнялся так, как и должны выравниваться большинство инлайн-элементов в html, т.е. по базовой линии (baseline) , т.е. выравнивается наш блок относительно своего текста, который в нём находится. Добавляем текста в блок и смотрим результат.

Блок выровнялся по базовой линии. Чего и следовало ожидать.
Сразу же приведу несколько разных примеров, поведения inline-block с разным вертикальным выравниванием.

Разное выравнивание

Тут я продемонстрировал три разных выравнивания, но на самом деле их намного больше, если интересно, то вот здесь описаны все возможные варианты. В данной статье нет смысла всех их описывать. Просто учитывайте это, при работе с inline-block.

inline-block — как буква

Одна из главных вещей, которые вы должны знать, это то, что наш ~~коробок со спичками~~ inline-block — является по сути обычной буквой — символом, т.е. весь наш строчный блок составляет всего лишь одну букву в строке, одну единицу. Даже не смотря на то, что содержит в себе кучу других символов или элементов. Именно по этой причине inline-block не «разрываются», как строчные элементы, а переносятся на следующую строку целиком. Ну и соответственно, если рядом с inline-block не будет пробелов, то расстояние между ним и соседними буквами будет обычный межбуквенный интервал (трекинг), которым можно управлять (кернинг). Если есть пробелы — до соседней буквы будет этот же интервал плюс ширина пробела.

Переваривайте эту информацию и идёмте дальше…

Почему в статье я использую именно inline-block?

На самом деле «Проблема» пробелов для inline-block и обычных инлайн элементов — является общей. Т.е. и с теми и с другими происходят идентичные вещи. Ненавистные отступы, появляются у тех и у других. Просто дело в том, что:
Во-первых, inline-block имеет больше возможностей, таких например, как задание ширины или высоты и т.д.
Во-вторых, мне всё-таки хотелось немного объяснить вам, что такое inline-block и что они из себя представляют, всё-же они относятся к строкам, как-никак.
Ну и в-третьих это то, что с inline-block связаны определённые проблемы в браузере Safari, о которых мне бы хотелось, чтобы вы знали.

Так что я думаю, что знакомство с этим поведением строчно-блочного элемента будет для вас полезным делом и, безусловно, расширит ваш кругозор.

Загадочные отступы

Познакомившись поближе со строчно-блочным элементом, мы можем смело двигаться дальше, к демонстрации и ответам на вопрос: «Откуда берутся отступы после инлайн элементов?». Для того, чтобы понять, о чём идёт речь, приведу код и скриншот с проблемой.

<ul>
	<li>Пункт 1</li>
	<li>Пункт 2</li>
	<li>Пункт 3</li>
	<li>Пункт 4</li>
	<li>Пункт 5</li>
</ul>

ul {
	font: 14px Verdana,sans-serif;
}
	ul li {
		display : inline-block ;
		width : 100px;
		border : 1px solid #E76D13;

		/* эмуляция inline-block для IE6-7*/

		//display : inline;
		//zoom : 1;
	}

В итоге мы видим ту самую «неприятность», из-за которой мы все тут и собрались.

На картинке отчётливо видны пробелы между пунктами меню. Откуда же они берутся? Причина кроется в том, что, как мы уже выяснили, inline-block ведет себя, как обычная буква, а значит так же, как и простой текст — имеет пробелы между словами. Эти пробелы можно отчётливо наблюдать в разных веб-инспекторах, например таких как «IE WebDeveloper» для Internet Explorer.

Как мы видим, браузер создаёт пустой текстовый узел, который, по сути, может являться переводом строки, пробелом или, например, табом. Все и эти перечисленные вещи превращаются в один единственный пробел и описывается следующей сущностью:  . Так же следует учитывать, что, так как пробел — это обычный символ, то, соответственно, и изменяться этот самый символ будет в зависимости от размера или семейства шрифта, т.е, по сути, вести себя точно также, как и обычная буква в строке. Всё это обязательно следует учитывать при вёрстке.

Наша задача

Перед нами стоит задача каким-то образом избавиться от этого ненавистного расстояния. Убрать, сделать его ширину нулевой, сплющить, спрятать, всё что угодно… в общем придумать какой нибудь способ, который избавит нас от этого межсловного промежутка и соединит наши пункты вплотную.

Материал для работы

Давайте поразмыслим, что же нам сможет помочь для решения этой задачи.

1. margin-left (отрицательный) — свойство, с помощью которого можно сдвинуть пункты влево, как бы друг на друга, «избавившись» так сказать от ненавистного пробела между них.
2. font-size — свойство, задающее размер шрифта, с помощью которого нашему пробелу (символу) можно выставить размер шрифта, равный нулю, и тем самым сделать его настолько маленьким, что его попусту не будет видно.
3. letter-spacing — свойство, определяющее интервал между символами. По умолчанию (normal) задаёт обычный интервал, исходя из размера и типа шрифта.
4. word-spacing — свойство, определяющее интервал между словами. По умолчанию так же, как и letter-spacing, задаёт его в зависимости от размера и типа шрифта.
5. Прижать элементы друг к другу, т.е. вплотную, тег к тегу, и таким образом убрать межссловный интервал.
6. Поставить комментарии между элементами, тем самым убрав между ними отступы.
7. Самое, на мой взгляд, интересное решение из всех… оставлю его пожалуй на закуску… интрига…

Плюс ко всему сделаем тестовый элемент <div>Ширина = 510px</div>, который будет нашей вспомогательной линейкой. Ширина наших пунктов в сумме составляет 510px. Это боковые границы + их ширина + кол-во самих пунктов ((1+100+1)*5) = 510.

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

Вариант 1 — margin-left

Первым у нас на очереди выступает левый отрицательный margin. Посмотрим, как он сможет помочь нам. Код CSS для наглядности:

ul {
	font: 14px Verdana,sans-serif;
}
	ul li {
		display : inline-block;
		width : 100px;
		border : 1px solid #E76D13;
		margin-left: -.36em;

		/* эмуляция inline-block для IE6-7*/
		//display : inline;
		//zoom : 1;

		/* margin-left отдельно для  IE6-7 */
		//margin-left: 0;
	}

Из кода видно, что для общего списка я выставил шрифт Verdana и размер шрифта в 14px (в наших примерах будет отталкиваться от этих значений). Ну и ,конечно же, левый отрицательный margin, равный -.36em. Как вы могли заметить, для нашей цели я выбрал именно масштабируемую единицу длины (em), потому что, как мы уже знаем, наш пробел пляшет от размера шрифта, а значит, может масштабироваться в зависимости от него. Долго повозившись со значениями, я определил, что -.36em) подходит для нашего шрифта лучше всего (для иного придётся подбирать другие значения), так что оставим, пожалуй, именно этот масштаб. Посмотрим на результат:

Как мы можем наблюдать из скриншота, наши пункты уехали за левую границу, что в принципе и очевидно, ведь мы же по сути подвинули все пункты влево, а значит, и первый пункт также уехал в левую сторону. Для решения этого «недоразумения», мы можем обнулить margin-left именно у первого пункта меню, добавив в наш код следующую запись ul li:first-child { margin-left: 0;}.
*Стоит заметить, что для IE6-7 мы вообще обнулили margin-left, а почему… мы узнаем чуть позже.

А между делом смотрим результат:

Да, действительно, на данный момент во всех браузерах всё здорово и смотрится одинаково. Хм… неужели мы добились своей цели? Давайте проверим это, сделав размер шрифта, к примеру, в два раза больше.

ul {
	font: 28px Verdana,sans-serif;
}
	ul li {
		display : inline-block;
		width : 100px;
		border : 1px solid #E76D13;
		margin-left: -.36em;

		/* эмуляция inline-block для IE6-7*/
		//display : inline;
		//zoom : 1;

		/* margin-left отдельно для  IE6-7 */
		//margin-left: 0;
	}

	ul li:first-child { margin-left: 0;}.

Как можно видеть, мы достигли своей цели, но это до тех пор, пока мы не поменяли шрифт, например, на Arial (предварительно подогнав под него левый, отрицательный margin)

Выставив фон нашему списку, мы можем заметить, что теперь результаты немного разнятся в браузерах Chrome, Opera 11.53, IE6-8 и Firefox 8, IE 9. В первых всё осталось на своих местах, а вот в последних можно заметить небольшой отступ справа, что говорит о том, что всё-таки есть риск получить немного не ту картину, которую мы задумывали изначально. Как вариант, конечно же, можно подогнать спец. значения для Firefox 8 и IE 9 отдельно, но, опять же, это не очень хорошее решение, так как во-первых, это по сути костыль, а во-вторых, не даёт полной универсальности, ведь никогда не знаешь, при каких размерах и как, поведут себя остальные браузеры.

В общем, я, лично, сделал вывод, что это вполне себе нормальный и жизнеспособный вариант, в фиксированной ситуации можно подогнать размеры и будет всё в порядке. Ряд минусов конечно же тоже есть, в виде обнуления margin-left у первого пункта + подгонка значений для разных браузеров, ну и… конечно же есть доля риска, из-за которой могут быть, хоть и не большие, но какие-то отличия с отступами, при разных шрифтах и их размерах.

Результат с margin-left

Вариант 2 — font-size

Как вы уже знаете, font-size влияет на размер шрифта элемента, делая его больше или меньше, в зависимости от своего значения. Пробел — это символ, который исходит от этого самого размера шрифта, а значит, с помощью font-size мы можем попробовать воздействовать на него, например, выставив его значение в ноль и тем самым, возможно полностью «скрыть» наш ненавистный пробел. Давайте проверим это на деле.

ul {
	font: 14px Verdana, Geneva, sans-serif;

	/* Выставляем родителю значение в ноль */
	font-size: 0;
}
	ul li {
		display : inline-block;
		width : 100px;
		border : 1px solid #E76D13;

		/* эмуляция inline-block для IE6-7*/
		//display : inline;
		//zoom : 1;
	}

Что произошло с символами? Куда они все пропали? На самом деле всё просто. font-size наследуемое свойство, а значит, выставив родителю (в нашем случае UL) какое либо значение, отличное от значения по умолчанию, мы должны возвратить font-size в прежнее состояние, у потомков (в нашем случае у LI).

ul {
	font: 14px Verdana, Geneva, sans-serif;

	/* Выставляем родителю значение в ноль */
	font-size: 0;
}
	ul li {
		display : inline-block;
		width : 100px;
		border : 1px solid #E76D13;

		/* Возвращаем в нормальное состояние у потомков */
		font-size: 14px;

		/* эмуляция inline-block для IE6-7*/
		//display : inline;
		//zoom : 1;
	}

Отлично! Теперь всё работает! Но везде ли? Проверяем… упс… к сожалению почти…

Как видно из скриншотов, Safari подвёл нас, напрочь отказавшись обнулять наш межсловный символ :(. Почему же так произошло? Не найдя ответа на этот вопрос, я рискнул предположить, что всё-таки это ни что иное, как самый настоящий баг браузера Safari и поэтому, нам нужно, либо искать вменяемое лекарство от этого бага, либо отказываться от этого способа, полностью. Исключать этот способ из списка не очень хочется, потому что, во-первых, этот вариант не работает лишь в Safari, а во-вторых, моя интуиция мне подсказывала, что решение всё же имеется. В итоге спортивный интерес взял вверх и решение всё таки нашлось! Да, и при чём оно оказалось для меня приятной неожиданностью. Ответ кроется в свойстве display: table, которое вешается на контейнер с пунктами (в нашем случае UL). Проверим.

ul {
	font: 14px Verdana, Geneva, sans-serif;

	/* Выставляем родителю значение в ноль */
	font-size: 0;

	/* Лекарство отдельно для Safari */
	display: table;
}
	ul li {
		display : inline-block;
		width : 100px;
		border : 1px solid #E76D13;

		/* Возвращаем в нормальное состояние у потомков */
		font-size: 14px;

		/* эмуляция inline-block для IE6-7*/
		//display : inline;
		//zoom : 1;
	}

А вот и скриншот из Safari:

Супер! Сработало! Но как же это так? Возможно, при display:table движок воспринимает строку блоков внутри как «что-то вроде table-cell», т.е. ячеек таблицы, в каких-то FF до 3.6, если я ничего не путаю, был похожий баг.

Чем это может нам грозить?

Есть пару мелких недостатков, о которых следовало бы знать.
1. Во всех браузерах, кроме Firefox, точкой отсчёта позиционированных элементов являются ближайший предок с relative, т.е. это может быть та же ячейка (TD). Но у нас тут не TD, а LI, так что в этом плане проблем у нас точно не будет. Но проблемы будут, если мы захотим позиционировать сами LI, внутри UL, а так как UL у нас — это, по сути, таблица, то Firefox откажется позиционировать пункты относительно её. Но тут не стоит беспокоиться, так как в этом случае на помощь к нам придёт обычная обёртка (например div) для элемента UL.
2. Второй нюанс — ширина. display:table по умолчанию не растягивается на доступное пространство, так что может понадобиться еще выставление ширины контейнеру (а при наличии бордеров/паддингов — box-sizing: border-box c нужными префиксами вдобавок).

Это что касалось самого display:table, а что же сам font-size? У него есть минусы? Да, есть, пожалуй, один неприятный недостаток. Из-за нулевого значения font-size у родителя, мы не можем применять масштабируемые единицы длины к потомкам, т.к. они отталкиваются от наследуемого размера шрифта и соответственно от нуля в нашем случае. Ну и плюс ко всему, это то, что всегда надо быть начеку и смотреть, чтобы у потомков был переназначен размер шрифта.

Ну а так в целом способ, вполне себе рабочий, если не считать нюансы. Так что смотрим пример в действии и идём дальше.
Решение с font-size

Вариант 3 — letter-spacing

Третьим номером у нас идёт letter-spacing. Чуть ранее мы выяснили, что это свойство влияет на интервал между символами, а так как наш inline-block по сути и есть один, большой символ, то letter-spacing всё таки должен помочь в решении нашей задачи. Как и в прошлый раз, я повозился с масштабом и выяснил, что -.36em будет как раз то, что нужно для Verdana.
* Да, и ещё стоит учесть, что letter-spacing, как и font-size, наследуемое свойство, поэтому нам придётся проделывать ту же операцию с обнулением потомков, что и во втором варианте.

ul {
	font: 14px Verdana, Geneva, sans-serif;

	/* Выставляем родителю значение -.36em */
	letter-spacing : -.36em;
}
	ul li {
		display : inline-block;
		width : 100px;
		border : 1px solid #E76D13;

		/* Возвращаем в нормальное состояние у потомков */
		letter-spacing: normal;

		/* эмуляция inline-block для IE6-7*/
		//display : inline;
		//zoom : 1;
	}

Отлично, сами пункты вроде бы состыковались так, как нам нужно. «Вроде бы» — я сказал не случайно, а почему, вы поймёте из следующих скриншотов.

Во всех браузерах, кроме Opera, мы можем наблюдать вполне себе отличную картину, но вот в самой Opera к сожалению всё наоборот. Как оказалось, Норвежцы считают, что letter-spacing может влиять на всё, кроме пробела. Видимо из-за того, что символ пробела означает конец слова, а значит и letter-spacing заканчивает на этом свою работу, так как предназначен для сдвижки/раздвижки букв, именно внутри слова (в т.ч. для кернинга вручную). И тут не имеет значения, что inline-block тоже по сути буква, после неё есть пробел, а значит в любом случае, слово по факту, закончилось.
Считать ли это багом Opera? Ну не знаю, ситуация двоякая, и те и другие по своему правы, так что предлагаю оставить это на совести самой Opera, а самим отправиться на поиски решения этой проблемы.

В общем, повозившись довольно таки приличное время в поисках лекарства для этого случая, я не смог придти ни к чему путному, кроме как воспользоваться предыдущим решением с font-size и добавить его в наши стили.

ul {
	font: 14px Verdana, Geneva, sans-serif;

	/* Выставляем родителю значение -.36em */
	letter-spacing : -.36em;
	font-size : 0;
}
	ul li {
		display : inline-block;
		width : 100px;
		border : 1px solid #E76D13;

		/* Возвращаем в нормальное состояние у потомков */
		letter-spacing: normal;
		font-size : 14px;

		/* эмуляция inline-block для IE6-7*/
		//display : inline;
		//zoom : 1;
	}

Да, вот теперь всё отлично, font-size действительно смог нам помочь. Из этого я сделал вывод, что по сути можно пользоваться обоими вариантами в равной степени: font-size + display-table или letter-spacing + font-size. Т.е. как в первом, так и во втором случае нам требуются вспомогательные инструменты в виде дополнительных свойств.
Upd: Кстати, пока писал статью, обнаружил странный баг в Safari. Когда выставляешь родителю связку font-size : 0 и letter-spacing в любое значение em, например letter-spacing : -.36em, то в Safari всё сразу же рушится((. Причину этого странного поведения Safari мне так и не удалось выявить. Буду рад услышать ответ на этот вопрос в комментариях. Решением с моей стороны является выставление значений letter-spacing, например в пиксели.

Результат с letter-spacing

Вариант 4 — word-spacing

Сразу же хочется отметить, что word-spacing и letter-spacing похожи друг на друга и отличаются только лишь тем, что первый работает с расстоянием между символами, а второй — между словами. При этом word-spacing так же имеет свои недостатки, но в отличие от letter-spacing, с недостатками word-spacing можно бороться, что не может не радовать.
* Также стоит отметить, что word-spacing тоже наследуемое свойство, поэтому в целом код будет напоминать код с letter-spacing. Так что подбираем значение и в путь.

ul {
	font: 14px Verdana, Geneva, sans-serif;

	/* Выставляем родителю значение -.36em */
	word-spacing: -.36em;
}
	ul li {
		display : inline-block;
		width : 100px;
		border : 1px solid #E76D13;

		/* Возвращаем в нормальное состояние у потомков */
		word-spacing: normal;

		/* эмуляция inline-block для IE6-7*/
		//display : inline;
		//zoom : 1;
	}

По коду вроде всё уже ясно, переходим к скриншотам:

Ну и конечно же снова не обошлось без происшествий. Но теперь уже оба webkit-a (Chrome и Safari) показали нам свои недостатки. Как мы можем наблюдать, word-spacing в этих браузерах вообще не сработал, как будто бы мы его и не назначали. Поведение webkit-ов в данной ситуации, скорее всего, можно назвать багом, так как свойство, которое мы тут применяли, предназначено именно для межсловных расстояний. Доказательством в пользу бага служит то, что для обычных inline элементов word-spacing как раз таки работает в webkit так, как и должен, а вот для inline-block-ов к сожалению нет.

Первый вопрос, который вы зададите, будет: «А есть ли решение у данной проблемы?». С радостью отвечу вам, что ДА! И, как, ни странно, этим решением является снова наш старый, добрый display:table, который помог нам при проблемах в Safari, во втором варианте с font-size. Так что смело добавляем это правило и смотрим результат.

ul {
	font: 14px Verdana, Geneva, sans-serif;

	/* Выставляем родителю значение -.36em */
	word-spacing: -.36em;

	/* Лекарство для webkit */
	display: table;
}
	ul li {
		display : inline-block;
		width : 100px;
		border : 1px solid #E76D13;

		/* Возвращаем в нормальное состояние у потомков */
		word-spacing: normal;

		/* эмуляция inline-block для IE6-7*/
		//display : inline;
		//zoom : 1;
	}

Да, вы не ошиблись. display: table действительно помог нам решить баг webkit-ов. Недостатки этого лечения, собственно точно такие же, как я приводил во-втором варианте, т.е. это позиционирование и задания ширины в контейнере. В остальном этот способ я лично считаю более уместным, чем все предыдущие предшественники, так как, во-первых, мы всё таки решаем проблемы с межсловным расстоянием (word-spacing как раз и создан для этого), во-вторых, решение для проблемы webkit-ов вполне безобидное, если не считать пару нюансов, ну и в-третьих, я, тестировал этот метод с разными размерами шрифта и даже тут ничего страшного не заметил.
Так что привожу работающий пример, смотрим и идём далее…
Результат с word-spacing

Вариант 5, 6 — Соединение элементов

Эти два решения, я решил объединить в одно целое, так как они схожи по своей сути и делают почти одно и то же, т.е. состыковывают элементы, убирая между ними пробелы.

HTML первого варианта:

<ul><li>Пункт 1</li><li>Пункт 2</li><li>Пункт 3</li><li>Пункт 4</li><li>Пункт 5</li></ul>

Ну и второго соответственно:

<ul><!--
	--><li>Пункт 1</li><!--
	--><li>Пункт 2</li><!--
	--><li>Пункт 3</li><!--
	--><li>Пункт 4</li><!--
	--><li>Пункт 5</li><!--
--></ul>

А CSS для обоих вариантов будет таким:

ul {
	font: 14px Verdana, Geneva, sans-serif;

}
	ul li {
		display : inline-block;
		width : 100px;
		border : 1px solid #E76D13;

		/* эмуляция inline-block для IE6-7*/
		//display : inline;
		//zoom : 1;
	}

Ну и конечно же, скриншоты:

Как видно из кода, в первом варианте мы просто пристыковали элементы вплотную, перенеся закрывающие теги вплотную к открывающим. А во втором — поместили между границами элементов комментарии, заменяя ими наши пробелы. Т.е. фактически мы намеренно лишили элементы каких либо отступов между ними, специально соединив их разными способами. При этом, как можно заменить, у этих вариантов есть хороший плюс, для них не требуются никакие спец. свойства и костыли в CSS, они работают сами по себе, при чём во всех браузерах, начиная с IE6+.
Но между тем эти решения несут в себе ряд неких проблем, которые связаны, во-первых, с удобочитаемостью кода, во-вторых, со случайным сбросом одного элемента под другой или убиранием одного комментария возле пункта, что сразу же повлияет на отображения вашего сайта, далеко не в лучшую сторону. Например, ваш сайт, может попросту развалиться или какой-нибудь пункт перескочит на другую строку и т.д.

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

Так что пока смотрим рабочий пример и плавно переходим к завершающему методу, самому практичному и интересному, на мой взгляд…
Результат

Вариант 7

Как оказалось, на свете есть ещё более простое, а главное, абсолютно законное решение, которым я хочу поделиться. Дело в том, что любая спецификация HTML (но не XHTML), позволяет нам опускать закрывающие теги у некоторых элементов, т.е. разрешает их отсутствие. В спецификации HTML5 таких элементов целых 18 штук. Это означает, что мы, на вполне законных основаниях, можем пользоваться этим преимуществом. Ведь никто не запрещает нам это сделать, не правда ли?)
В нашем случае элементы <li> попадают в этот список, так что воспользуемся этим.

<ul>
	<li>Пункт 1
	<li>Пункт 2
	<li>Пункт 3
	<li>Пункт 4
	<li>Пункт 5
</ul>

ul {
	font: 14px Verdana, Geneva, sans-serif;

}
	ul li {
		display : inline-block;
		width : 100px;
		border : 1px solid #E76D13;

		/* эмуляция inline-block для IE6-7*/
		//display : inline;
		//zoom : 1;
	}

Т.е. по сути, я просто опустил закрывающие теги </li>, и раз после содержимого первого элемента сразу же идёт открывающий тег второго, то соответственно и интервала между ними быть не должно. Что наглядно демонстрируется на скриншоте.
*Стоит заметить, что в IE6-7, например, опциональные закрывающие теги в списках всё равно игнорируются, поэтому там этот метод получается «автоматом». Именно из-за этого в первом варианте c отрицательным левым margin-ом, мы, отдельно, обнуляли margin-left для этих браузеров.

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

Вывод такой, что этот метод не подходит «фанатикам валидности ради валидности», выбирающим XHTML-доктайп, но практикам, ориентирующимся на современные спецификации и реальный результат, отказываться от такого решения незачем =)
Результат

Резюме:

Подводя итоги, хочу сказать, что в данной статье мы выяснили, что за странные отступы браузер вставляет между инлайн-элементами, а так же рассмотрели много разных решений этой проблемы, и в итоге всё таки выяснили, что они не так страшны, как кажутся на первый взгляд. Как оказалось, с этой проблемой можно бороться (причём не одним способом) и побеждать её.

Все варианты воедино:

1. Результат с margin-left (Почти рабочее решение)
2. Решение с font-size (Рабочее решение)
3. Результат с letter-spacing (Работающее решение)
4. Результат с word-spacing (Рабочее решение)
5. Вариант с намеренно прижатыми элементами (Рабочее решение)
6. Решение с незакрытыми тегами (Рабочее решение)

Аналогичную статью я недавно опубликовал на хабре

P.S. Это тоже может быть интересно:

CSS позиционирование и плавающие элементы

CSS рассматривает макет html-документа как дерево элементов. Уникальный элемент, у которого нет родительского элемента, называется корневым элементом. Модуль CSS-позиционирование описывает, как любой из элементов может быть размещен независимо от порядка документа (т.е. извлечен из «потока»).

В CSS2 каждый элемент в дереве документа генерирует ноль или более блоков в соответствии с блочной моделью. Модуль CSS3 дополняет и расширяет схему позиционирования. Расположение этих блоков регулируется:

размерами и типом элемента,
схемой позиционирования (нормальный поток, обтекание и абсолютное позиционирование),
отношениями между элементами в дереве документа,
внешней информацией (например, размер области просмотра, внутренними размерами изображений и т.д.).

Схемы позиционирования

В CSS блок элемента может быть расположен в соответствии с тремя схемами позиционирования:

Нормальный поток

Нормальный поток включает блочный контекст форматирования (элементы с display block, list-item или table), строчный (встроенный) контекст форматирования (элементы с display inline, inline-block или inline-table), и относительное и «липкое» позиционирование элементов уровня блока и строки.

Обтекание

В обтекающей модели блок удаляется из нормального потока и позиционируется влево или вправо. Содержимое обтекает правую сторону элемента с float: left и левую сторону элемента с float: right.

Абсолютное позиционирование

В модели абсолютного позиционирования блок полностью удаляется из нормального потока и ему присваивается позиция относительно содержащего блока. Абсолютное позиционирование реализуется с помощью значений position: absolute; и position: fixed;.

Элементом «вне потока» может быть плавающий, абсолютно позиционированный или корневой элемент.

1. Содержащий блок

Положение и размер блока(ов) элемента иногда вычисляются относительно некоторого прямоугольника, называемого содержащим блоком элемента (containing block). В общих словах, содержащий блок — это блок, который содержит другой элемент. В случае нормального потока корневой элемент html является содержащим блоком для элемента body, который, в свою очередь, является содержащим блоком для всех его дочерних элементов и так далее. В случае позиционирования содержащий блок полностью зависит от типа позиционирования. Содержащий блок элемента определяется следующим образом:

Содержащий блок, в котором находится корневой элемент, представляет собой прямоугольник — так называемый начальный содержащий блок.
Для некорневого элемента с position: static; или position: relative; содержащий блок формируется краем области содержимого ближайшего родительского блока уровня блока, ячейки таблицы или уровня строки.
Содержащим блоком элемента с position: fixed; является окно просмотра.
Для некорневого элемента с position: absolute; содержащим блоком устанавливается ближайший родительский элемент со значением position: absolute/relative/fixed следующим образом:
— если предок — элемент уровня блока, содержащим блоком будет область содержимого плюс поля элемента padding;
— если предок — элемент уровня строки, содержащим блоком будет область содержимого;
— если предков нет, то содержащий блок элемента определяется как начальный содержащий блок.
Для «липкого» блока содержащим блоком является ближайший предок с прокруткой или окно просмотра, в противном случае.

2. Выбор схемы позиционирования: свойство position

Свойство position определяет, какой из алгоритмов позиционирования используется для вычисления положения блока.

Свойство не наследуется.

position
Значение:
`static`	Блок располагается в соответствии с нормальным потоком. Свойства `top`, `right`, `bottom` и `left` не применяются. Значение по умолчанию.
`relative`	Положение блока рассчитывается в соответствии с нормальным потоком. Затем блок смещается относительно его нормального положения и во всех случаях, включая элементы таблицы, не влияет на положение любых следующих блоков. Тем не менее, такое смещение может привести к перекрытию блоков, а также к появлению полосы прокрутки в случае переполнения. Относительно позиционированный блок сохраняет свои размеры, включая разрывы строк и пространство, первоначально зарезервированное для него. Относительно позиционированный блок создает новый содержащий блок для абсолютно позиционированных потомков. Влияние `position: relative;` на элементы таблицы определяется следующим образом: Элементы с `table-row-group`, `table-header-group`, `table-footer-group` иd `table-row` смещаются относительно их обычной позиции в таблице. Если ячейки таблицы занимают несколько строк, смещаются только ячейки начальной строки. `table-column-group`, `table-column` не смещает соответствующий столбец и не оказывает визуального влияния. table-caption and table-cell смещаются относительно своего нормального положения в таблице. Если ячейка таблицы охватывает несколько столбцов или строк, то она смещается целиком.
`absolute`	Положение блока (и, возможно, размер) задается с помощью свойств `top`, `right`, `bottom` и `left`. Эти свойства определяют явное смещение относительно его содержащего блока. Абсолютно позиционированные блоки полностью удаляется из нормального потока, не влияя на расположение сестринских элементов. Отступы `margin` абсолютно позиционированных блоков не схлопываются. Абсолютно позиционированный блок создает новый содержащий блок для дочерних элементов нормального потока и потомков с `position: absolute;`. Содержимое абсолютно позиционированного элемента не может обтекать другие блоки. Абсолютно позиционированный блок могут скрывать содержимое другого блока (или сами могут быть скрыты), в зависимости от значения `z-index` перекрывающихся блоков.
`sticky`	Положение блока рассчитывается в соответствии с нормальным потоком. Затем блок смещается относительно своего ближайшего предка с прокруткой или окна просмотра, если ни у одного из предков нет прокрутки. «Липкий» блок может перекрывать другие блоки, а также создавать полосы прокрутки в случае переполнения. «Липкий» блок сохраняет свои размеры, включая разрывы строк и пространство, первоначально зарезервированное для него. «Липкий» блок создает новый содержащий блок для абсолютно и относительно позиционированных потомков.
`fixed`	Фиксированное позиционирование аналогично абсолютному позиционированию, с отличием в том, что для содержащим блоком устанавливается окно просмотра. Такой блок полностью удаляется из потока документа и не имеет позиции относительно какой-либо части документа. Фиксированные блоки не перемещаются при прокрутке документа. В этом отношении они похожи на фиксированные фоновые изображения. При печати фиксированные блоки повторяются на каждой странице, содержащим блоком для них устанавливается область страницы. Блоки с фиксированным положением, которые больше области страницы, обрезаются.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

position: static;
position: relative;
position: absolute;
position: sticky;
position: fixed;
position: initial;
position: inherit;

Рис. 1. Разница между статичным, относительным и абсолютным позиционированием

3. Смещение блока: свойства top, right, bottom, left

Элемент считается позиционированным, если свойство position имеет значение, отличное от static. Позиционированные элементы генерируют позиционированные блоки и могут быть расположены в соответствии со следующими четырьмя физическими свойствами:

top
Значение:
`auto`	Влияние значения зависит типа элемента. Значение по умолчанию.
длина	Смещение на фиксированном расстоянии от указанного края. Отрицательные значения допускаются.
`%`	Процентные значения вычисляются относительно высоты содержащего блока. Для «липкого» блока — относительно высоты корневого элемента. Отрицательные значения допускаются.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

top: 10px;
top: 2em;
top: 50%;
top: auto;
top: inherit;
top: initial;

Свойство top задает расстояние, на которое верхний край абсолютно позиционированного блока (с учетом его margin) смещается ниже верхнего края содержащего блока. Для относительно позиционированных блоков определяет смещение относительно верхнего края самого блока (то есть блоку задается позиция в нормальном потоке, а затем смещение от этой позиции в соответствии с этим свойством).

right
Значение:
`auto`	Влияние значения зависит типа элемента. Значение по умолчанию.
длина	Смещение на фиксированном расстоянии от указанного края. Отрицательные значения допускаются.
`%`	Процентные значения вычисляются относительно ширины содержащего блока. Для «липкого» блока — относительно ширины корневого элемента. Отрицательные значения допускаются.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

right: -10px;
right: .5em;
right: -10%;
right: auto;
right: inherit;
right: initial;

Свойство right указывает расстояние, на которое правый край абсолютно позиционированного блока (с учетом его margin) смещен влево от правого края содержащего блока. Для относительно позиционированных блоков определяет смещение относительно правого края самого блока.

bottom
Значение:
`auto`	Влияние значения зависит типа элемента. Значение по умолчанию.
длина	Смещение на фиксированном расстоянии от указанного края. Отрицательные значения допускаются.
`%`	Процентные значения вычисляются относительно высоты содержащего блока. Для «липкого» блока — относительно высоты корневого элемента. Отрицательные значения допускаются.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

bottom: 50px;
bottom: -3em;
bottom: -50%;
bottom: auto;
bottom: inherit;
bottom: initial;

Свойство bottom указывает расстояние, на которое нижний край блока смещен вверх относительно нижнего края содержащего блока. Для относительно позиционированных блоков определяет смещение относительно нижнего края самого блока.

left
Значение:
`auto`	Влияние значения зависит типа элемента. Значение по умолчанию.
длина	Смещение на фиксированном расстоянии от указанного края. Отрицательные значения допускаются.
`%`	Процентные значения вычисляются относительно ширины содержащего блока. Для «липкого» блока — относительно ширины корневого элемента. Отрицательные значения допускаются.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

left: 50px;
left: 10em;
left: 20%;
left: auto;
left: inherit;
left: initial;

Свойство left указывает расстояние, на которое левый край смещен вправо от левого края содержащего блока. Для относительно позиционированных блоков определяет смещение относительно левого края самого блока.

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

4. Обтекание: свойство float

Обтекание позволяет блокам смещаться влево или вправо на текущей строке. «Плавающий блок» смещается влево или вправо до тех пор, пока его внешний край не коснется края содержащего блока или внешнего края другого плавающего блока. Если имеется линейный блок, внешняя верхняя часть плавающего блока выравнивается с верхней частью текущего линейного блока.

При использовании свойства float для элементов рекомендуется задавать ширину. Тем самым браузер создаст место для другого содержимого. Если для плавающего элемента недостаточно места по горизонтали, он будет смещаться вниз до тех пор, пока не уместится. При этом остальные элементы уровня блока будут его игнорировать, а элементы уровня строки будут смещаться вправо или влево, освобождая для него пространство и обтекая его.

Правила, регулирующие поведение плавающих боков, описываются свойством float.

Свойство не наследуется.

float
Значение:
`none`	Отсутствие обтекания. Значение по умолчанию.
`left`	Элемент перемещается влево, содержимое обтекает плавающий блок по правому краю.
`right`	Элемент перемещается вправо, содержимое обтекает плавающий блок по левому краю.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

float: left;
float: right;
float: none;
float: inherit;

Плавающий блок принимает размеры своего содержимого с учетом внутренних отступов и рамок. Верхние и нижние отступы margin плавающих элементов не схлопываются.

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

Свойство автоматически изменяет вычисляемое (отображаемое в браузере) значение свойства display на display: block для следующих значений: inline, inline-block, table-row, table-row-group, table-column, table-column-group, table-cell, table-caption, table-header-group, table-footer-group. Значение inline-table меняет на table.

Свойство не оказывает влияние на элементы с display: flex и display: inline-flex. Не применяется к абсолютно позиционированным элементам.

Рис. 2. Обтекание элементов

5. Управление потоком рядом с плавающими элементами: свойство clear

Свойство clear указывает, какие стороны блока/блоков элемента не должны прилегать к плавающим блокам, находящемся выше в исходном документе. В CSS2 и CSS 2.1 свойство применяется только к неплавающим элементам уровня блока.

Свойство не наследуется.

clear
Значение:
`none`	Означает отсутствие ограничений на положение элемента относительно плавающих блоков. Значение по умолчанию.
`left`	Смещает элемент вниз относительно нижнего края любого плавающего слева элемента, находящемся выше в исходном документе.
`right`	Смещает элемент вниз относительно нижнего края любого плавающего справа элемента, находящемся выше в исходном документе.
`both`	Смещает элемент вниз относительно нижнего края любого плавающего слева и справа элемента, находящемся выше в исходном документе.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

clear: none;
clear: left;
clear: right;
clear: both;
clear: inherit;

Для предотвращения отображение фона или границ под плавающими элементами используется правило {overflow: hidden;}.

6. Определение контекста наложения: свойство z-index

В CSS каждый блок имеет позицию в трех измерениях. В дополнение к горизонтальному и вертикальному положению, блоки выкладываются вдоль оси Z друг над другом. Положение вдоль оси Z особенно важно, когда блоки визуально накладываются друг на друга.

Рис. 3. Положение элементов вдоль оси Z

Порядок, в котором дерево документа отрисовывается на экране, описывается с помощью контекста наложения. Каждый блок принадлежит одному контексту наложения. Каждый блок в данном контексте наложения имеет целочисленный уровень, который является его положением на оси Z относительно других блоков в том же контексте наложения.

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

Свойство z-index позволяет изменить способ наложения элементов друг на друга.

Свойство не наследуется.

z-index
Значение:
`auto`	Вычисляется в `0`. Если для блока задано `position: fixed;` или это корневой элемент, значение `auto` также устанавливает новый контекст наложения. Значение по умолчанию.
целое число	Определяет положение блока в текущем контексте наложения. Также устанавливает новый локальный контекст наложения. Можно использовать любое целое число, включая отрицательные числа. Отрицательные значения помещают элемент вглубь экрана.
`inherit`	Наследует значение свойства от родительского элемента.
`initial`	Устанавливает значение свойства в значение по умолчанию.

Синтаксис

z-index: auto;
z-index: 0;
z-index: 5;
z-index: 999;
z-index: -1;
z-index: inherit;
z-index: initial;

Выравнивание списков средствами CSS

Список по центру

Автоматически центрировать список вне зависимости от длины строк достаточно просто

/* -- Стиль CSS --*/
div.center_list{
  text-align: center;
}
div.center_list > ul {
  display: inline-block;
  text-align: left;
  max-width: 70% /* не обязательно */
}

пункт списка 1
пункт списка 2 большей длины
пункт 3

Минус данного способа в необходимости дополнительной разметки — список должен быть заключен в содержащий контейнер, которому присвоен класс div.center_list.

Горизонтальный список

Иногда, например при использовании списка в качестве меню, нужно расположить элементы списка в строку.

Вариант 1. Сделать элементы списка строчными

/*-- CSS. Строчный вариант --*/
 
li {
  display:inline;
  padding:0 10px;
}

Получаем список такого вида:

элемент списка 1
элемент списка 2
элемент списка 3

Вариант 2. Сделать элементы списка плавающими

/*-- CSS. Плавающий вариант --*/
 
ul {
  list-style: none; /* убираем маркеры, если нужно */
}
li {
  float: left; /* для выравнивания по правому краю - right */
  padding: 0 10px;
}

Получаем такой же список:

элемент списка 1
элемент списка 2
элемент списка 3

На практике, в частности при создании меню на основе списка, чаще используется второй вариант.

Плавающий список

Заголовок не совсем точен; речь идет о списке, обтекающем плавающий элемент.

И опять возвращаемся к плавающим элементам. Два понятия — «плавающий элемент» и «обтекание». Необходимо четко представлять что это такое, что где плавает и что обтекает:

Плавает элемент, у которого свойству float присвоено
значение left или right.

И плавает у соответствующей кромки содержащего блока или прижимается соответствующей кромкой к другому плавающему элементу.

Следующие за ним, обычные блоки никого не обтекают! Они «тупо» не видят плавающий блок….

Подлость происходящего в том и состоит, что обтекает только текст (строчные элементы и элементы с установленным свойством display: inline или display: inline-block!

Когда-то изначально свойство float именно для этого и было придумано!

Все неприятности — от маркеров, которые не являются строчными элементами, и часто происходит следующее:

плавающий блок

пункт 1
пункт 2

Наверняка, многие тщетно пытались вытащить маркер из под плавающего блока, увеличивая margin и padding …

Попытка увеличить правый отступ плавающего элемента выглядела бы более успешно, если бы не параграфы.

Вот как это может выглядеть:

плавающий блок
margin-right: 25px

Параграф до списка

пункт 1
пункт 2

Параграф после списка

Согласитесь, не очень красиво.

Решение

/*-- CSS --*/
/*-- Cтиль, установленный по умолчанию --*/
ul {
  margin: 0 0 10px 25px;
}
/*-- Переопределяем стили --*/
ul {
  margin: 0 0 10px 10px;
  padding-left: 15px;
  overflow: hidden;
}

В результате получаем:

плавающий блок

Параграф до списка

пункт 1
пункт 2

Параграф после списка

Особенности применения

Чтобы оставить отступ обычных, не обтекающих списков неизменным, мы уменьшили margin и увеличили padding на одинаковую величину. Отступ маркера от начала текста равен размеру шрифта (14px), и padding должен быть больше этой величины, иначе маркер обрежет.

Мы определили свойства для тега ul. Т.е. для всех списков на сайте. Это не очень хорошо, так-как overfow: hidden, в некоторых случаях, может оказаться не безобидным. Поэтому нужно выбрать один из способов использования данного метода:

1. Если обтекающий список — редкое исключение:

Добавляем конкретным тегам ul класс, например ul.folat_list, и прописываем свойства уже для класса.

2. Обратная ситуация, когда свойство необходимо присвоить только спискам без класса:

Используем следующую конструкцию (только для соврменных браузеров, поддерживающих CSS3)

/*-- CSS --*/
/*-- Для "деклассированных" списков --*/
ul:not([class])  {
  margin: 0 0 10px 10px;
  padding-left: 15px;
  overflow: hidden;
}

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

Основные приемы размещения блоков (div) горизонтально при помощи CSS.

Из чего выбрать или методы

«Для рывка» или немного теории

Метод «Float»

Метод «Inline-block»

Метод «Table»

CSS: создание горизонтального меню | СХОСТ блог

Как сделать список li и ul в две колонки CSS

Сделать HTML список UL LI в две колонки при помощи CSS

«Загадочные отступы» между инлайн-элементами — CSS-LIVE

inline-block

inline-block — как буква

Почему в статье я использую именно inline-block?

Загадочные отступы

Наша задача

Материал для работы

Вариант 1 — margin-left

Вариант 2 — font-size

Вариант 3 — letter-spacing

Вариант 4 — word-spacing

Вариант 5, 6 — Соединение элементов

Вариант 7

Резюме:

Все варианты воедино:

P.S. Это тоже может быть интересно:

CSS позиционирование и плавающие элементы

Схемы позиционирования

Нормальный поток

Обтекание

Абсолютное позиционирование

1. Содержащий блок

2. Выбор схемы позиционирования: свойство position

3. Смещение блока: свойства top, right, bottom, left

4. Обтекание: свойство float

5. Управление потоком рядом с плавающими элементами: свойство clear

6. Определение контекста наложения: свойство z-index

Выравнивание списков средствами CSS

Список по центру

Горизонтальный список

Плавающий список

Решение

Особенности применения

Добавить комментарий Отменить ответ