Как выстроить элементы в линию css
Перейти к содержимому

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

  • автор:

div элементы в одну строку

Используй display: inline-block или float: left на селектор .div1 Подробнее про выравнивание элементов.

Отслеживать
9,848 5 5 золотых знаков 29 29 серебряных знаков 59 59 бронзовых знаков
ответ дан 24 июн 2016 в 9:56
21 1 1 бронзовый знак

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

28 ноя 2016 в 8:20

Все дело в том, что внутри — блочный элемент. Попробуйте так:

 
123
123
123

SPAN — inline элемент, но DIV — блочный. Результат — все в столбик.

Уберите везде DIV — получите результат в строку.

Для того, чтобы получить то, что хотите — можно указать не display: inline, а display: inline-block, либо делать через таблицы (не в тегах, а в стилях — например, display: table)

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

Вывести маркированный список в одну строку и убрать отображение маркеров.

Решение

Элементы списка по умолчанию выстраиваются вертикально друг под другом, но иногда требуется разместить их по горизонтали, например, для создания различных меню. В таком случае к селектору LI следует добавить стилевое свойство display со значением inline , оно преобразует блочный элемент в строчный (пример 1).

Пример 1. Горизонтальный список

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

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

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

Из-за того, что вокруг списка автоматически добавляются отступы, их следует изменить, добавляя свойства margin и padding к селектору UL , как показано в примере.

HTML по теме

CSS по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные рецепты

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

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

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

  • Вертикального выравнивания блока внутри родителя.
  • Оформления всех детей контейнера так, чтобы они распределили между собой доступную ширину/высоту, независимо от того, сколько ширины/высоты доступно.
  • Сделать все колонки в макете одинаковой высоты, даже если наполнение в них различно.
 class="container">  class="box">
class="box">
class="box">
class="box">
.container  /* Одного этого параметра будет достаточно чтобы элементы встали в ряд */ display: flex; > .box  /* стили элементов */ background-color: #38d9a9; height: 20px; width: 20px; > 

Вывод нескольких элементов в ряд (Flexbox)

Чтобы выводить три элемента в ряд, достаточно задать им класс .col-md-4 (для вывода используется CSS-свойство display: flex ).

 class="row">  class="col-md-4">Элемент 1  class="col-md-4">Элемент 2  class="col-md-4">Элемент 3  

В результате элементы будут выводиться следующим образом:

HTML и CSS: Grid (Twitter Bootstrap)

Число «4» в имени класса означает размер элемента. В одной строке итоговое значение должно достигать «12». Например, если задать элементам класс .col-6 , тогда будут выводиться два элемента в ряд. Если задать .col-12 , то будет выводиться по одному элементу в ряд.

В мобильной версии элементы автоматически будут выводиться по одному элементу в строке (выравниваясь по всей ширине). Если надо указать, например, что в мобильной версии выводить два элемента в ряд, то можно использоваться класс .col-6 .

 class="row">  class="col-md-4 col-6">Элемент 1  class="col-md-4 col-6">Элемент 2  class="col-md-4 col-6">Элемент 3  

Другие варианты (по порядку возрастания размера экрана).

2-ой способ: CSS (Flexbox)

В CSS3 стало доступно свойство Flex, которое позволяет настраивать вывод элементов на странице.

/* CSS */ .items < display: flex; flex-wrap: wrap; > .item < flex: 30%; max-width: 30%; >  class="items">  class="item">Элемент 1  class="item">Элемент 2  class="item">Элемент 3  

Код выше будет выводить все элементы .item на одной строке (за это отвечает display: flex; ).

Чтобы элементы не выходили за пределы родительского элемента, а переносились на следующую строку, используется CSS-свойство flex-wrap: wrap .

CSS-свойство flex задаёт минимальную ширину элементов, т.е. если в одной строке будет два элемента, то они выровнятся по всей ширине. Чтобы элементы выводились с указанным размером, используется свойство max-width , которая задаёт максимальную ширину.

HTML и CSS: Flexbox

Flexbox поддерживается всеми современными браузерами, в Internet Explorer поддерживается без префикса -ms с версии IE 11.

Обновлено: 01 ноября 2020

Комментарии

Авторизуйтесь, чтобы добавлять комментарии

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *