Как разместить элементы горизонтально css

 class="container">  class="box">

.container  /* Одного этого параметра будет достаточно чтобы элементы встали в ряд */ display: flex; > .box  /* стили элементов */ background-color: #38d9a9; height: 20px; width: 20px; > 

Блоки DIV по горизонтали

Ширина же задана для #main, когда вложенные блоки div достигают предела ширину в 1119px блок спозлает снизу и в левый край.

2 апр 2014 в 2:21
попробуй div
2 апр 2014 в 2:26
и что это даст? у меня количество блоков вложенных не обязательно 3
2 апр 2014 в 2:28
2 апр 2014 в 2:30

4 ответа 4

Сортировка: Сброс на вариант по умолчанию

HTML

CSS

 * < margin: 0px; padding: 0px; >html, body < height: 100%; >body < background-color: #ccc; >div < border: 1px solid #fff; margin:10px; text-align: center; >#main < width: 1119px; height: 150px; overflow: hidden; >#main>div 

Отслеживать
ответ дан 2 апр 2014 в 4:50
Анатолий Синицын Анатолий Синицын
61 3 3 бронзовых знака

Вы плохо прочитали мой вопрос, сейчас это сделано, но это не решает проблему. Добавьте в ваш пример по ссылке — еще 5 блоков и проиндексируйте — увидите, что не поместившиеся блоки съехали в невидимую область слева.

2 апр 2014 в 16:13

не проще ли для всех троих блоков задать ширину и высоту а потом просто добавит ко всем float:left

Отслеживать
27.6k 5 5 золотых знаков 35 35 серебряных знаков 65 65 бронзовых знаков
ответ дан 2 апр 2014 в 12:43
Роман Соколов Роман Соколов
629 3 3 золотых знака 20 20 серебряных знаков 49 49 бронзовых знаков

Очень легко: блокам display: inline-block; родителю white-space: nowrap;. Таким образом мы запрещаем перенос строк.

Отслеживать
ответ дан 30 дек 2017 в 12:13
105 10 10 бронзовых знаков

Решение без переноса:

.main < display: flex; flex-direction: row; flex-wrap: nowrap; >.main__item

 
Вася
 
Петя
 
Миша
 
Сыр
 
Вася
 
Петя
 
Миша
 
Сыр
 
Вася
 
Петя
 
Миша
 
Сыр
 
Вася
 
Петя
 
Миша
 
Сыр
 
Вася
 
Петя
 
Миша
 
Сыр
 

Решение с переносом:

.main < display: flex; flex-direction: row; flex-wrap: wrap; >.main__item

 
Вася
 
Петя
 
Миша
 
Сыр
 
Вася
 
Петя
 
Миша
 
Сыр
 
Вася
 
Петя
 
Миша
 
Сыр
 
Вася
 
Петя
 
Миша
 
Сыр
 
Вася
 
Петя
 
Миша
 
Сыр
 

Кроссбраузерность без переноса:

upd: с переносом думаю сами додуматесь? 🙂

.main < display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; >.main__item

 
Вася
 
Петя
 
Миша
 
Сыр
 
Вася
 
Петя
 
Миша
 
Сыр
 
Вася
 
Петя
 
Миша
 
Сыр
 
Вася
 
Петя
 
Миша
 
Сыр
 
Вася
 
Петя
 
Миша
 
Сыр
 

Отслеживать
ответ дан 26 апр 2018 в 11:37
1,552 4 4 золотых знака 16 16 серебряных знаков 32 32 бронзовых знака

• html
• вёрстка
• css

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как разместить элементы списка горизонтально или горизонтальное меню с помощью CSS

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

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

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

Для того чтобы идентифицировать список и задать для него нужные css стили, я добавил к нему атрибут id с идентификатором «menu» .

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

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

Если же требуется получить горизонтальное меню, то просто необходимо расположить элементы списка по горизонтали. Для этого к селектору LI следует добавить стилевое свойство display со значением inline или inline-block . Я буду использовать правило display:inline-block . Итак, для того, чтобы элементы списка выстроились по горизонтали просто добавляем код CSS:

Теперь элементы списка будут расположены по горизонтали:

Как видим пункты меню выстроились в один горизонтальный ряд. Но пока на меню похоже не очень. Теперь, чтобы получить полноценную навигационную панель, оформим меню с помощью css стилей. Для начала добавим фон для панели, растянем ссылки на весь пункт li, уберем подчеркивание ссылок, настроим отступы и др.:

В итоге получится такое привлекательное меню:

Вообще внешний вид меню далее зависит только от вашей фантазии и знания свойств css. Далее для примера приведу несколько вариантов оформления меню.

Горизонтальное меню по центру

Выравнять меню по центру можно так:

Горизонтальное меню с пунктами одинаковой ширины

Чтобы сделать все пункты меню одинакового размера указываем для них нужный размер. Только главное чтобы в сумме размеры пунктов не превышали размер всей панели. Можно сделать так:

Если добавить немного трансформации:

то получим меню со скошенными углами:

На этом все, пробуйте и предлагайте свои варианты в комментариях. Ссылка на исходный файл с примерами. До новых встреч!

Как разместить div горизонтально по центру в Bootstrap 4

В макетах веб-дизайна очень часто используется горизонтальное выравнивание столбца в ряде(row) или контейнере. Но как это сделать, используя классы Bootstrap? Ниже приведены некоторые различные способы достижения этого эффекта.

Вариант 1 — Bootstrap Смещение

Вы можете использовать классы Bootstrap Offset для горизонтального сдвига столбцов влево или вправо. Это полезно, когда вы хотите, чтобы один столбец имел максимальную ширину, но выравнивал его в row.

 
Смотри! Я по центру