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

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

Главная css Как разместить элементы списка горизонтально/в колонки

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

display — свойство, которое определяет, как элемент должен быть показан в документе.

display: значение	Описание
block	Элемент показывается как блочный. Применение этого значения для встроенных элементов, например тега <span>, заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого.
inline	Элемент отображается как встроенный. Использование блочных тегов, таких как <div> и <p>, автоматически создает перенос и показывает содержимое этих тегов с новой строки. Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент.
inline-block	Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде тега <img>). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный.
inline-table	Определяет, что элемент является таблицей как при использовании тега <table>, но при этом таблица является встроенным элементом и происходит ее обтекание другими элементами, например, текстом.
list-item	Элемент выводится как блочный и добавляется маркер списка.
none	Временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было. Изменить значение и сделать вновь видимым элемент можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происходит переформатирование данных на странице с учетом вновь добавленного элемента.
run-in	Устанавливает элемент как блочный или встроенный в зависимости от контекста.
table	Определяет, что элемент является блочной таблицей подобно использованию тега <table>.
table-caption	Задает заголовок таблицы подобно применению тега <caption>.
table-cell	Указывает, что элемент представляет собой ячейку таблицы (тег <td> или <th>).
table-column	Назначает элемент колонкой таблицы, словно был добавлен тег <col>.
table-column-group	Определяет, что элемент является группой одной или более колонок таблицы, как при использовании тега <colgroup>.
table-footer-group	Используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы. По своему действию сходно с работой тега <tfoot>.
table-header-group	Элемент предназначен для хранения одной или нескольких строк ячеек, которые представлены вверху таблицы. По своему действию сходно с работой тега <thead>.
table-row	Элемент отображается как строка таблицы (тег <tr>).
table-row-group	Создает структурный блок, состоящий из нескольких строк таблицы аналогично действию тега <tbody>.
flex	Устанавливает элемент как блочный, а его потомки становятся flex элементами.
inline-flex	Устанавливает элемент как строчно-блочный, а его потомки становятся flex элементами.

«Меню»

<style>
.meny {margin: 0; padding: 4px;}  
ul.meny li {
   display: inline-block; /* Отображать как строчный элемент */
   margin-right: 5px; 
   border: 1px solid #000000; 
   padding: 5px; 
}
</style>
<ul> 
  <li>Ссылка 1</li> <li>Ссылка 2</li> <li>Ссылка 3</li> <li>Ссылка 4</li> <li>Ссылка 5</li>
</ul> 

Результат Примера «Меню»

• Ссылка 1
• Ссылка 2
• Ссылка 3
• Ссылка 4
• Ссылка 5

Чтобы разместить элементы списка в несколько колонок, надо использовать свойство тега <columns>, которое позволяет одновременно задать ширину и количество колонок многоколоночного текста.

2

1. Расположение ссылок в 4 колонки
2. Расположение ссылок в колонки автоматически
3. Расположение текста в 2 колонки

<style>
  .col-4 { columns: 4; }
  .col-auto{columns: 100px auto; }
  .col-2 { columns: 2 200px; }
</style>
<b>Сылки А:</b>
<ul>
   <li><a href="#">Ссылка 1</a></li><li><a href="#">Ссылка 2</a></li>
   <li><a href="#">Ссылка 3</a></li><li><a href="#">Ссылка 4</a></li>
   <li><a href="#">Ссылка 5</a></li><li><a href="#">Ссылка 6</a></li>
   <li><a href="#">Ссылка 7</a></li><li><a href="#">Ссылка 8</a></li>
   <li><a href="#">Ссылка 9</a></li><li><a href="#">Ссылка 10</a></li>
   <li><a href="#">Ссылка 11</a></li><li><a href="#">Ссылка 12</a></li>
   <li><a href="#">Ссылка 13</a></li><li><a href="#">Ссылка 14</a></li>
   <li><a href="#">Ссылка ААА</a></li>
</ul>
<b>Сылки Б:</b>
<ul>
  <li><a href="#">Ссылка 1</a></li><li><a href="#">Ссылка 2</a></li>
  <li><a href="#">Ссылка 3</a></li><li><a href="#">Ссылка 4</a></li>
  <li><a href="#">Ссылка БББ</a>
</ul>
<b>Сылки С:</b>
<ul>
   <li><a href="#">Ссылка 1</a></li><li><a href="#">Ссылка 2</a></li>
   <li><a href="#">Ссылка 3</a></li><li><a href="#">Ссылка 4</a></li>
   <li><a href="#">Ссылка 5</a></li><li><a href="#">Ссылка 6</a></li>
   <li><a href="#">Ссылка 7</a></li><li><a href="#">Ссылка 8</a></li>
   <li><a href="#">Ссылка 9</a></li><li><a href="#">Ссылка 10</a></li>
   <li><a href="#">Ссылка 11</a></li><li><a href="#">Ссылка 12</a></li>
   <li><a href="#">Ссылка 13</a></li><li><a href="#">Ссылка 14</a></li>
   <li><a href="#">Ссылка ССС</a></li>
</ul>
<b>Текст:</b>
  <div>
    Текст Текст Текст Текст Текст Текст Текст Текст Текст 
  </div>

Результат Примера 2 Сылки А:

• Ссылка1
• Ссылка2
• Ссылка3
• Ссылка4
• Ссылка5
• Ссылка6
• Ссылка7
• Ссылка8
• Ссылка9
• Ссылка10
• Ссылка11
• Ссылка12
• Ссылка13
• Ссылка14
• СсылкаААА

Сылки Б:

• Ссылка1
• Ссылка2
• Ссылка3
• Ссылка4
• СсылкаБББ

Сылки С:

• Ссылка 1
• Ссылка 2
• Ссылка 3
• Ссылка 4
• Ссылка 5
• Ссылка 6
• Ссылка 7
• Ссылка 8
• Ссылка 9
• Ссылка 10
• Ссылка 11
• Ссылка 12
• Ссылка 13
• Ссылка 14
• Ссылка ССС

Текст:

Как расположить текст на странице в несколько колонок? И можно ли это делать автоматически? Наверняка, многие из тех из вас, кто занимается или занимался раньше веб-разработкой, сталкивались с такой задачей — и часто упирались в сложные решения, требующие хитрых стилей, либо применения дополнительных библиотек на JavaScript.

Многоколоночная верстка контента (не путать с задачей общей многоколоночной верстки страницы, которая скорее ближе к проблеме расположения блоков по сетке) долго пробивала себе дорогу в мире веб-стандартов и, наконец-то, не просто достигла статуса Candidate Recommendation в виде соответствующего модуля CSS3 Multi-column Layout, но и получила достаточно широкую поддержку в браузерах: где-то с префиксами (-moz- или -webkit-) и где-то в актуальных (Opera 11.1+) и планируемых версиях (IE10+), причем сразу без префиксов.

Ссылка на статью >>>

Как добавить к номеру списка круглую скобку

Для добавления скобки используем конструкцию li:before, которая добавляет перед каждым элементом списка некое содержание. В нашем случае — скобка » ) «.
Свойство counter-increment необходимо для увеличения номера списка на единицу.
Значение idnum — это уникальный идентификатор счетчика, имя его задаем сами. 3

<style>
ol {
  list-style-type: none; /* Убираем исходные маркеры */
  counter-reset: idnum;   /* Обнуляем счетчик списка */
}
li:before {
  content: counter(idnum) ') '; /* Добавляем к числам скобку */
  counter-increment: idnum;     /* Задаём имя счетчика */
}
</style>
<ol>
    <li>Первый</li>
    <li>Второй</li>
    <li>Третий</li>
    <li>Четвертый</li>
 </ol>

Результат Примера 3

1. Первый
2. Второй
3. Третий
4. Четвертый

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

content: '[' counter(idnum) '] ';    

Результат Примера 4

[1] Первый
[2] Второй
[3] Третий
[4] Четвертый

CSS

◄ Назад

8 из 20

Вперед ►

Разместить элементы списка горизонтально — «Списки» » Самоучитель CSS

Меню

Наши новости

Учебник CSS

Невозможно отучить людей изучать самые ненужные предметы.

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить — становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

Самоучитель CSS

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки

Видео уроки

Разместить статью у нас на сайте.

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

Наш опрос

Помогли мы вам

Наши новости

РЕКЛАМА

26-03-2016, 14:05

Разместить элементы списка горизонтально — «Списки»

---

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	1.0+	7.0+	3.0+	1.0+	1.0+	1.0+

Задача

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

Решение

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

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

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Горизонтальный список</title>
  <style>
   ul.hr {
    margin: 0; /* Обнуляем значение отступов */
    padding: 4px; /* Значение полей */
   }
   ul.hr li {
    display: inline; /* Отображать как строчный элемент */
    margin-right: 5px; /* Отступ слева */
    border: 1px solid #000; /* Рамка вокруг текста */
    padding: 3px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>
  <ul>
   <li>Мчади</li>
   <li>Када на мацони</li>
   <li>Пахлава</li>
   <li>Кчуч</li>
   <li>Лилибдж</li>
  </ul>
 </body>
</html>

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

 

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

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

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

 

Еще новости по теме:

Другие новости по теме:

Комментарии для сайта Cackle

---

html — Как сделать отображение в горизонтальной строке

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

 #div_top_hypers {
    цвет фона:#eeeeee;
    дисплей: встроенный;
}
#ul_top_hypers {
    дисплей: встроенный;
} 

 <дел>
    <ул>
        
‣  Входящие
        
‣  Написать
        
‣  Отчеты
        
‣  Настройки
        
‣  выйти
    
 

• HTML
• CSS
• HTML-списки

0

Элементы списка обычно являются блочными элементами. Превратите их во встроенные элементы с помощью свойства display .

В приведенном вами коде вам нужно использовать селектор контекста, чтобы свойство display: inline применялось к элементам списка, а не к самому списку (применение display: inline к общему списку не будет иметь никакого эффекта ):

 #ul_top_hypers ли {
    дисплей: встроенный;
}
 

Вот рабочий пример:

 #div_top_hypers {
    цвет фона:#eeeeee;
    дисплей: встроенный;
}
#ul_top_hypers ли {
    дисплей: встроенный;
} 

 <дел>
    <ул>
        
‣  Входящие
        
‣  Написать
        
‣  Отчеты
        
‣  Настройки
        
‣  выйти
    
 

5

Вы также можете установить их плавающими вправо.

 #ul_top_hypers ли {
    поплавок: справа;
}
 

Это позволяет им оставаться на уровне блоков, но они будут отображаться в одной строке.

2

Как уже упоминалось, вы можете установить li на display:inline; или с плавающей запятой li влево или вправо. Кроме того, вы также можете использовать дисплей: гибкий; на ул . В приведенном ниже фрагменте я также добавил justify-content:space-around , чтобы увеличить интервал.

Для получения дополнительной информации о flexbox ознакомьтесь с этим полным руководством.

 #ul_top_hypers {
    дисплей: гибкий;
    оправдать-содержание: пространство-вокруг;
    тип стиля списка: нет;
} 

 <дел>
    <ул>
        
‣  Входящие
        
‣  Написать
        
‣  Отчеты
        
‣  Настройки
        
‣  выйти
    
 

Установите для свойства display значение inline для списка, к которому вы хотите применить это. Есть хорошее объяснение отображения списков в A List Apart.

0

Как сказал @alex, вы могли бы перемещать его вправо, но если вы хотите сохранить разметку такой же, перемещайте ее влево!

 #ul_top_hypers ли {
    плыть налево;
}
 

Вам подойдет:

 #ul_top_hypers li {
    отображение: встроенный блок;
}
 

 #ul_top_hypers ли {
  дисплей: гибкий;
}
 

0

Если вы хотите выровнять элементы списка (li) по горизонтали, не влияя на стиль списка, используйте указанные ниже свойства. ул{дисплей:гибкий; зазор: 30 пикселей; } gap:30px используется для установки промежутка между элементами списка.

Чтобы быть более конкретным, используйте это:

 #div_top_hypers ul#ul_top_hypers li{
дисплей: встроенный;
}
 

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

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

html — Горизонтальный список CSS –

Задавать вопрос

спросил 4 года, 6 месяцев назад

Изменено 4 года, 6 месяцев назад

Просмотрено 8к раз

Итак, я пытаюсь скопировать этот шаблон веб-сайта: ссылка

Я хочу сделать элементы списка горизонтальными, как в ссылке выше, но это просто не работает с display:inline block , что я видел в Google и на этом форуме, я также пытался использовать с плавающей запятой. Я пытался найти несколько способов, включая использование таблицы , но это тоже не работает. Вероятно, это глупая ошибка, которую я не замечаю, но я не могу найти решение.

HTML:

 

<голова>
  <метакодировка="UTF-8" />
  <ссылка rel="stylesheet" href="test.css" />
  <название>название

<тело>
  <дел>
    
       
Белль и Кэрри
 
    
    реабилитационная йога
    
  

 тело {
  фон: #077054;
  цвет: #315f52;
}
.заголовок {
  выравнивание текста: по центру;
}
.заголовок {
  текстовое оформление: нет;
  цвет: #99fa99;
  размер шрифта: 20px;
  вес шрифта: нормальный;
  семейство шрифтов: "latoregular";
}
.header диапазон {
  цвет: #b6d8cf;
  размер шрифта: 26px;
  преобразование текста: верхний регистр;
  семейство шрифтов: 'nixie_oneregular';
}
.listHorizontal {
 цвет: #b6d8cf;
  размер шрифта: 30px;
  преобразование текста: верхний регистр;
  стиль списка: нет;
  дисплей: встроенный блок;
}
 

 body {
  фон: #077054;
  цвет: #315f52;
}

. заголовок {
  выравнивание текста: по центру;
}
.заголовок {
  текстовое оформление: нет;
  цвет: #99fa99;
  размер шрифта: 20px;
  вес шрифта: нормальный;
  семейство шрифтов: "latoregular";
}
.header диапазон {
  цвет: #b6d8cf;
  размер шрифта: 26px;
  преобразование текста: верхний регистр;
  семейство шрифтов: 'nixie_oneregular';

}

.listHorizontal {
  дисплей: гибкий;
  выравнивание содержимого: пространство вокруг;
  цвет: #b6d8cf;
  размер шрифта: 30px;
  преобразование текста: верхний регистр;
  стиль списка: нет;
} 

 <дел>
    
       
Белль и Кэрри
 
    
    реабилитационная йога