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

Содержание

Как стилизовать список UL в одну строку

Я хочу отобразить этот список в одной строке.

  • Список элемент1
  • Список место № 2

Должно быть показано как

*List *List место № 2 место № 2

Какой стиль CSS использовать?

css

Поделиться

Источник


R.D    

10 июня 2009 в 17:01

5 ответов

  • Как стилизовать wp_list_page в wordpress?

    Я пытаюсь стилизовать список выходов wp_list_page, в основном я хотел бы обернуть каждую отдельную страницу в закругленную рамку. Все, что я, кажется, могу сделать, это стилизовать LI и UL на CSS, но я не работаю. Есть идеи, как это сделать? Спасибо

  • Невозможно стилизовать UL, содержащий DIV

    Я пытаюсь стилизовать UL горизонтально, но мой код будет работать только тогда, когда я удалю два встроенных DIV’s . Если я удалю div = thumb и div = button , то список будет выглядеть правильно. У кого-нибудь есть идеи, как я могу это исправить? HTML / PHP: <div class=container-app…

Поделиться


rz.    

10 июня 2009 в 17:02


29

В современных браузерах вы можете сделать следующее (CSS3 совместимо)

ul
{
  display:flex;  
  list-style:none;
}
<ul>
  <li><a href="">Item1</a></li>
  <li><a href="">Item2</a></li>
  <li><a href="">Item3</a></li>
</ul>

Поделиться


davidlbaileysr    

14 января 2015 в 03:32


15

HTML код:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

CSS код:

ul.list li{
  width: auto;
  float: left;
}

Поделиться


adel aaji    

20 января 2010 в 14:26

  • Dojo dgrid: как стилизовать одну строку?

    Я хочу стилизовать одну строку и избежать определения форматеров для каждой ячейки моей строки. Существует ли эквивалент события onStyleRow для нового виджета Dojo dgrid ? Спасибо.

  • Как стилизовать выпадающий список UL/LI

    У меня есть неупорядоченный список,который я пытаюсь настроить во время выполнения, вызываемый стилем DropKick CSS. Вот изображение того, что я вижу: Я попытался стилизовать его так, что ничего не сделало со стилем: .dk_options ul li a { margin: 0; padding: 0; list-style-type: none; }…


11

Попробуйте также поэкспериментировать с чем-то подобным:

HTML

 <ul>
   <li>She</li>
   <li>Needs</li>
   <li>More Padding, Captain!</li>
 </ul>

CSS

 .inlineList {
   display: flex;
   flex-direction: row;
   /* Below sets up your display method: flex-start|flex-end|space-between|space-around */
   justify-content: flex-start; 
   /* Below removes bullets and cleans white-space */
   list-style: none;
   padding: 0;
   /* Bonus: forces no word-wrap */
   white-space: nowrap;
 }
 /* Here, I got you started.
 li {
   padding-top: 50px;
   padding-bottom: 50px;
   padding-left: 50px;
   padding-right: 50px;
 }
 */

Я сделал кодовый код, чтобы проиллюстрировать: http://codepen.io/agm1984/pen/mOxaEM

Поделиться


agm1984    

06 декабря 2016 в 09:28

Поделиться


Matee Gojra    

18 февраля 2020 в 05:48

Похожие вопросы:

Список строк в одну строку

Я пытаюсь сделать это упражнение в книге, Определение функции: onSeperateLines :: [String] -> String который принимает список строк и возвращает одну строку, которая при печати показывает строки…

Невозможно стилизовать ul вложенный в другой ul

Несмотря на то, что это простая проблема, я не могу понять, почему я не могу стилизовать вложенный ul. HTML: <div class=footer-left> <ul> <li><a…

Как стилизовать фон маркированных точек в <ul> ?

У меня есть такой список: <ul> <li class=list-item> <span>Label</span> <div class=multi-line-content> multi-<br /> line<br /> content </div>…

Как стилизовать wp_list_page в wordpress?

Я пытаюсь стилизовать список выходов wp_list_page, в основном я хотел бы обернуть каждую отдельную страницу в закругленную рамку. Все, что я, кажется, могу сделать, это стилизовать LI и UL на CSS,…

Невозможно стилизовать UL, содержащий DIV

Я пытаюсь стилизовать UL горизонтально, но мой код будет работать только тогда, когда я удалю два встроенных DIV’s . Если я удалю div = thumb и div = button , то список будет выглядеть правильно. У…

Dojo dgrid: как стилизовать одну строку?

Я хочу стилизовать одну строку и избежать определения форматеров для каждой ячейки моей строки. Существует ли эквивалент события onStyleRow для нового виджета Dojo dgrid ? Спасибо.

Как стилизовать выпадающий список UL/LI

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

Android — > ListView-как стилизовать 2 вида текста в одну строку?

у меня есть элемент списка, и я хотел бы стилизовать 2 (или более) текстовых представления в одну строку. ———————————————— | | | TEXT_VIEW_1: FOO TEXT_VIEW_2: BAR | |…

Как сделать список в одну строку в css

Я вставляю в тему пользовательский виджет, и мне нужно сделать список в одну строку, как я могу это сделать? Я все перепробовал

Как стилизовать два разных тега <ul> в HTML и CSS?

У меня есть тег ‘ul’, который уже стилизует что-то другое. Мне нужно создать еще один тег ‘ul’, чтобы стилизовать что-то еще на моей странице HTML. Это первый стиль ul : ul { list-style: none;…

CSS: как сделать горизонтальный (UL) список, сохраняя каждый элемент одинаковой ширины?

То есть без определения конкретной суммы ‘width’ для каждого отдельного элемента. Например, самый широкий элемент (по своему содержанию) задает ширину для каждого из других элементов.

Кроме того, как я могу охватить указанный список 100% по всему его контейнеру, также сохраняя каждый элемент одинаковой ширины?

css

list

width

Поделиться

Источник


Hamster    

15 августа 2010 в 14:53

3 ответа

  • Оберните каждый элемент в горизонтальный список с помощью CSS

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

  • Горизонтальный (встроенный) список в HTML/CSS с divs

    Я пытаюсь построить простой горизонтальный список, где каждый элемент списка является div, и я хочу, чтобы все они сидели рядом друг с другом. Однако когда я пытаюсь использовать приведенный ниже код, дивы оказываются на отдельных строках. Вот что у меня есть: HTML: <ul id=navlist>…


2

Если я правильно понял:

  1. Вам нужен список.
  2. Вы хотите, чтобы каждый элемент списка был одинаковой ширины.

  3. Вы хотите, чтобы эта ширина была шириной содержимого самого широкого элемента списка

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

Поэтому я предполагаю, что вам нужны два разных решения.

Я думаю, что вы можете сделать

<style>
  ul, li{float:left;margin;padding:0;display:block;}
  li {clear:left;width:100%;margin:1px 0;background:#03a;}
</style>
<ul>
  <li>Item 1</li>
  <li>Item 2 which is longer</li>
  <li>Item 3</li>
</ul>

работает в некоторых браузерах. Кажется, я помню, что он не работал в IE и должен был заставить его работать, используя выражения css.

Идея заключается в том, что ul и li плавают, чтобы уменьшить их до ширины содержимого.
li очищаются и устанавливаются на 100% ширины контейнера, того же контейнера, который сжимается до их размера.

—

Ваш другой вариант невозможен в CSS, если вы не знаете количество элементов списка.
Хотя, если вы не знаете количество элементов списка, это означает, что на стороне сервера или на стороне клиента выполняется сценарий, и вы можете узнать количество элементов. 🙂

Я решил эту проблему в прошлом, предоставив ul класс с количеством детей в нем, используя множество правил CSS и надеясь, что один из них будет придерживаться.

напр.

<style>
  ul.lis1 li {width:100%}
  ul.lis2 li {width:50%}
  ul.lis3 li {width:33.3%}
  ul.lis4 li {width:25%}
  /* ... you can keep going forever here, though there'll be a point at which they become too thin and your UI breaks anyway, */
</style>
<ul> <!-- lis4 is generated by PHP or Ruby or whatever -->
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
</ul>

Поделиться


robotdana    

16 августа 2010 в 02:09


1

Используйте css таблицы с фиксированным расположением таблиц.

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

ul
{
    display: table;
    table-layout: fixed;
    width: 100%;
    border: 1px solid #c2c2c2;
    box-sizing: border-box;
}

li
{
    text-align: center;
    display: table-cell;
    border-right: 1px solid #c2c2c2;
}

Пример FIDDLE

Поделиться


Danield    

02 сентября 2013 в 08:31


0

Для этого вам нужно будет их отпустить:

ul {
  list-style: none;
}

ul li {
  float: left;
  width: 100px; /* Or whatever arbitrary amount you want */
}

Список должен автоматически охватывать ширину контейнера — его блочного элемента.

Поделиться


Yi Jiang    

15 августа 2010 в 15:02

  • Горизонтальный список пунктов меню Force width (CSS)

    Как я могу заставить все элементы в горизонтальном списке (меню) быть одинаковой ширины? Это мой код CSS до сих пор: a { text-decoration:none; } #navlist ul { margin:0; padding:0; list-style-type:none; } #navlist ul li { display:inline; } #navlist li a { padding:10px; margin:2px; background:grey;…

  • Горизонтальный список (ul) с многострочным элементом списка?

    У меня есть горизонтальный список (для навигационной панели), и я хочу, чтобы отдельный элемент списка был многолинейным. Я попытался использовать <br /> , но это приводит к тому, что весь список пропускает строку Вот что я получил за html : <ul class=nav_list> <li><a…

Похожие вопросы:

создать горизонтальный список в css

я хочу поместить 3 ящика в горизонтальный список. Код, который я использовал, таков <div class=rowtitle> <ul> <li style=display: inline;> <div class=service-wrapper1> <a…

Как я могу сделать элемент списка с одинаковой длиной?

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

Создание разных li (родительского и дочернего) одинаковой ширины

Я создаю горизонтальную навигационную панель ul . Каждый элемент li имеет разную ширину. Я хочу сделать так, чтобы в выпадающем меню выпадающие элементы «children» li стали такой же…

Оберните каждый элемент в горизонтальный список с помощью CSS

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

Горизонтальный (встроенный) список в HTML/CSS с divs

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

Горизонтальный список пунктов меню Force width (CSS)

Как я могу заставить все элементы в горизонтальном списке (меню) быть одинаковой ширины? Это мой код CSS до сих пор: a { text-decoration:none; } #navlist ul { margin:0; padding:0;…

Горизонтальный список (ul) с многострочным элементом списка?

У меня есть горизонтальный список (для навигационной панели), и я хочу, чтобы отдельный элемент списка был многолинейным. Я попытался использовать <br /> , но это приводит к тому, что весь…

Горизонтальный ползунок каждый элемент занимает 100% окна

Я хочу сделать горизонтальный ползунок, каждый элемент которого занимает 100% окна. Я не хочу указывать ширину контейнера с помощью CSS, так как они должны быть динамическими. <div…

Python PIL каждый символ одинаковой ширины

Я пытаюсь нарисовать какой-то текст на картинке, используя пакет PIL с python. Есть ли способ, которым я могу нарисовать каждый символ одинаковой ширины? Спасибо!

Как сделать все элементы одинаковой ширины в оберточной flexbox?

У меня есть список элементов переменной ширины внутри оберточной коробки flex . Я хочу, чтобы все элементы имели одинаковую ширину, поэтому я применил следующие атрибуты CSS: flex-basis: 0 и…

c# — Горизонтальный список в RazorPages

Нужно создать горизонтальный список.
Есть стиль

<style>
    ul.hr {
        margin: 0; /* Обнуляем значение отступов */
        padding: 4px; /* Значение полей */
    }

        ul.hr li {
            display: inline; /* Отображать как строчный элемент */
            margin-right: 5px; /* Отступ слева */
            border: 1px solid #000; /* Рамка вокруг текста */
            padding: 3px; /* Поля вокруг текста */
        }
</style>

Есть пример где этот стиль работает и выводит горизонтальный список

<ul>
    <li>Мчади</li>
    <li>Када на мацони</li>
    <li>Пахлава</li>
    <li>Кчуч</li>
    <li>Лилибдж</li>
</ul>

И есть пример где этот стиль не работает.

<h4>Топ 5 самых читаемых</h4>
@{
    if (Model.TopReaded == null)
    {
        return;
    }
    foreach (var topRateBook in Model.TopReaded)
    {
        <ul>
            <li>
                <p><img src="@Url.Content(topRateBook.Value)"></p>
                <p>@topRateBook.Key.RateOfBook</p>
                <p>@topRateBook.Key.ReadCount</p>
                <p>@topRateBook.Key.BookName</p>
                <p>@topRateBook.Key.AuthorPseudonym</p>

            </li>

        </ul>

    }
}

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

Добавлено:
Из ответов вижу, что не совсем корректно сформировал вопрос.

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

А набор из таких элементов должен идти по горизонтали. Схема ниже

Картинка     Картинка    Картинка    Картинка
строчка      строчка     строчка     строчка
строчка      строчка     строчка     строчка
строчка      строчка     строчка     строчка

Как сделать список в HTML (нумерованный и маркированный). Маркеры списка

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

Стандартом пятой версии html поддерживается 3 вида списков: нумерованные списки, маркированные списки и списки определений. Также предоставляется возможность вкладывать списки друг в друга, создавая вложенные многоуровневые списки.

Нумерованный список

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

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

Для создания нумерованных списков в HTML используется тег <ol>, внутри которого располагаются элементы списка с данными. Каждый пункт списка указывается с помощью тега <li>:


<html>
  <body>

    <h5>Нумерованный список:</h5>
    <ol>
      <li>Кофе</li>
      <li>Чай</li>
      <li>Молоко</li>
    </ol>

  </body>
</html>

Попробовать »

Примечание: тег <ol> в качестве дочерних элементов может содержать только теги <li>, то есть всё содержимое нумерованного списка должно размещаться внутри элементов <li>. Тег <li>, в свою очередь, не имеет ограничений на содержимое, поэтому в нём можно размещать абзацы, картинки, ссылки, таблицы, другие списки и т.д.

Маркированный список

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

Для создания маркированных списков в HTML применяется тег <ul>, внутри которого располагаются элементы самого списка (как и в случае с нумерованными списками используется тег <li>, который содержит в себе всё отображаемое содержимое списка):


<html>
  <body>

    <h5>Маркированный список:</h5>
    <ul>
      <li>Кофе</li>
      <li>Чай</li>
      <li>Молоко</li>
    </ul>

  </body>
</html>

Попробовать »

Виды маркеров

Виды маркеров нумерованного списка можно изменить с помощью атрибута type. Данный атрибут поддерживает пять видов маркеров:

ЗначениеОписание
1Десятичные числа (1, 2, 3..)
aСписок в алфавитном порядке, строчные буквы (a, b, c..)
AСписок в алфавитном порядке, заглавные буквы (A, B, C..)
iРимские цифры, строчные (i, ii, iii, iv..)
IРимские цифры, заглавные (I, II, III, IV..)

Маркированные списки не имеют атрибута type, поэтому средствами HTML изменить вид маркера у маркированного списка не получится. Для изменения вида маркера, в этом случае, можно воспользоваться CSS свойством list-style-type, с помощью которого, помимо значения по умолчанию, можно выбрать ещё два вида маркера: circle или square.

Изменение маркеров у списков:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Заголовок страницы</title>
  </head>	
  <body>

    <h5>Нумерованный список c атрибутом type="a":</h5>
    <ol type="a">
      <li>Яблоки</li><li>Бананы</li><li>Лимоны</li>
    </ol>

    <h5>Нумерованный список c атрибутом type="I":</h5>
    <ol type="I">
      <li>Яблоки</li><li>Бананы</li><li>Лимоны</li>
    </ol>
	
	<h5>Виды маркеров маркированных списков:</h5>
	
    <ul>
      <li>Яблоки</li><li>Бананы</li><li>Лимоны</li>
    </ul>
	
	<ul>
      <li>Яблоки</li><li>Бананы</li><li>Лимоны</li>
    </ul>

  </body>
</html>

Попробовать »

CSS свойство list-style-type, помимо видов маркеров для маркированных списков, имеет множество различных видов маркеров и для нумерованных списков. Но не всегда изменения одного стандартного вида маркера на другой бывает достаточно для того, чтобы красиво оформить список. Для оформления списков лучше использовать CSS, который позволяет не только изменять вид маркера, но и заменять маркеры на картинки, контролировать их расположение и управлять отступом. Как всё это делать вы можете посмотреть тут.

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

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

Чтобы создать горизонтальный список, надо для пунктов списка прописать CSS свойство display со значением inline или inline-block, в зависимости от того, какие ещё свойства вы собираетесь использовать.


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Заголовок страницы</title>
	<style>li { display: inline; }</style>
  </head>	
  <body>

    <h5>Нумерованный список</h5>
    <ol>
      <li>Яблоки</li><li>Бананы</li><li>Лимоны</li>
    </ol>
	
	<h5>Маркированный список:</h5>
	
    <ul>
      <li>Яблоки</li><li>Бананы</li><li>Лимоны</li>
    </ul>

  </body>
</html>

Попробовать »

После этого все пункты списка выстроятся в одну строку. Обратите внимание, что у пунктов списка пропадут маркеры и между ними не будет даже пробела, но отступ слева у списка останется.

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

С этой темой смотрят:

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

Задача

Отобразить маркированый список горизонтально без маркеров.

Решение

Тег маркированного списка <ul> по умолчанию выводит элементы <li> вертикально друг над другом. Для создания элементов навигации, в некоторых случаях, удобно выводить список горизонтально. Для получения такого отображения списка есть несколько способов.

Вам уже должно быть известно, что в HTML есть блочные и строчные элементы. Строчные элементы не создают своих блоков, пример таких элементов – это теги <span> или <strong>. Блочные элементы отображаются с новой строки и создают прямоугольный блок, пример таких тегов <div> или <p>. Так вот, тег <li> также является блочным элементом.

Чтобы тег <li> не вёл себя как блочный элемент, можно при помощи CSS сделать его строчным.

За то, как элемент будет отображён в документе, отвечает CSS свойство display. Рассмотрим три его значения (хотя их больше):

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

Сначала сделаем горизонтальный список превратив его пунткы в строчные элементы. В стиле CSS пропишем правило, в котором селектору li установлено свойство display со значением inline.

<!DOCTYPE html>
<html>
<head>
<title>Список горизонтально</title>
<style>
	ul.menu-top > li {
		display: inline;	/* Располагаем элементы по горизонтали */
		list-style: none;	/* Убираем маркеры списка */
		padding: 5px;		/* Поля вокруг текста */
	        border: solid 1px #000000;
	        background-color: #fffff0;
	}
</style>
</head>
<body>
<ul>
	<li>Пункт 1</li>
	<li>Пункт 2</li>
	<li>Пункт 3</li>
</ul>

</body>
</html>

Знак > в селекторе указывает что мы обращаемся только к дочерним элементам <li> тега <ul> с классом menu-top. Читайте подробнее про дочерние селекторы.

Итак, этот стиль сработал и получили горизонтальное расположение пунктов списка:

Рисунок 1. Работа примера №1.

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

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

<style>
	ul.menu-top > li {
		display: inline;	/* Располагаем элементы по горизонтали */
		list-style: none;	/* Убираем маркеры списка */
		padding: 5px;		/* Поля вокруг текста */
	        border: solid 1px #000000;
	        background-color: #fffff0;
	        width: 150px;
	        height: 40px;
	}
</style>

Эти правки не приведут ни к каким изменениям. Чтобы элементы меню располагались горизонтально и можно было устанавливать их ширину и высоту им нужно установить тип inline-block. Изменим код нашего примера:

<!DOCTYPE html>
<html>
<head>
<title>Список горизонтально</title>
<style>
	ul.menu-top > li {
		display: inline-block;	/* Располагаем элементы по горизонтали */
		list-style: none;	/* Убираем маркеры списка */
		padding: 5px;		/* Поля вокруг текста */
	        border: solid 1px #000000;
	        background-color: #fffff0;
	        width: 150px;
	        height: 40px;
	}
</style>
</head>
<body>
<ul>
	<li>Пункт 1</li>
	<li>Пункт 2</li>
	<li>Пункт 3</li>
</ul>

</body>
</html>

Этот код работает и изменения видны:

Рисунок 2. Работа примера №2.

Но могут быть разные варианты, например нам нужно отобразить в меню вложенные списки:

<!DOCTYPE html>
<html>
<head>
	<title>Вложенный список.</title>
	<style>
	ul.menu > li {
		display: inline-block;	/* Располагаем элементы по горизонтали */
		list-style: none;	/* Убираем маркеры списка */
		padding: 5px;		/* Поля вокруг текста */
	        background-color: #fffff0;
	        border: 1px solid #000000;
	}
	</style>
</head>
<body>

<ul>
	<li>Правка
	<ul>
		<li><a href="#">Отменить</a></li>
		<li><a href="#">Вырезать</a></li>
		<li><a href="#">Копировать</a></li>
		<li><a href="#">Вставить</a></li>
	</ul>
	</li>
	<li>Начертание
	<ul>
		<li><a href="#">Жирное</a></li>
		<li><a href="#">Курсивное</a></li>
		<li><a href="#">Подчеркнутое</a></li>
	</ul>
	</li>
	<li>Размер
	<ul>
		<li><a href="#">Маленький</a></li>
		<li><a href="#">Нормальный</a></li>
		<li><a href="#">Средний</a></li>
		<li><a href="#">Большой</a></li>
	</ul>
	</li>
</ul>

</body>
</html>

Вот результат работы этого кода:

Рисунок 3. Работа примера №3.

Мы видим что блоки выравниваются по высоте не так, как нам хотелось бы. Конечно, можно указать для всех блоков одинаковую высоту, но не всегда нам заранее известно её точное значение, и оно может меняться.

А собственно, почему так происходит?

Наши блоки имеют свойство display со значением inline-block. Это значит что у них есть качества как блочных элементов (возможность указать ширину и высоту), так и строчных элементов. То что мы наблюдаем – это качество строчных элементов.

Давайте рассмотрим строку с символами «А» разной величины:

А
А
А
А
А
А
А

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

Для выравния текста по вертикали служит свойство vertical-align. В нашем примере №3 нужно использовать значение top, которое выравняет верхнюю границу элемента по верху самого высокого элемента строки.

Пока применим его к строке с символами «А» разной величины:

А
А
А
А
А
А
А

Кажется, что буквы немного «скачут». Я установил CSS границу border самой высокой букве, чтобы было видно, что скачков на самом деле нет, есть пустое пространство между верхней границей (по которой происходит выравнивание) и верхней точкой символа «А».

Свойство vertical-align нужно применять к каждому строчному элементу, оно не наследуется. Вы можете прочитать подробней про это свойство: vertical-align.

После этого отступления продолжим размещать элементы списка горизонтально.

Второй способ

Разместить элементы списка горизонтально можно используя свойство float. Это свойство указывает по какой стороне выравнивается элемент, имеет две позиции: left и right.

Вот пример с использованием этого кода:

<!DOCTYPE html>
<html>
<head>
	<title>Список горизонтально</title>
<style>
ul.menu-top > li {
    float: left;        /* разещаем список горизонтально */
    list-style: none;	/* Убираем маркеры списка */
    padding: 5px;
    margin: 2px;
    border: 1px solid #000000;
    background-color: #fffff0;
}
</style>
</head>
<body>
<ul>
	<li>Пункт 1</li>
	<li>Пункт 2</li>
	<li>Пункт 3</li>
</ul>

</body>
</html>

Вот результат работы кода:

Рисунок 4. Работа примера.

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

<!DOCTYPE html>
<html>
<head>
	<title>Список горизонтально</title>
<style>
ul{
	border: 1px solid red;
}
ul.menu-1 > li, ul.menu-2 > li {
	list-style: none;	/* Убираем маркеры списка */
	padding: 5px;
	margin: 2px;
	border: 1px solid #000000;
	background-color: #fffff0;
}
/* разещаем списки горизонтально */
ul.menu-1 > li {
	float: left;
}
ul.menu-2 > li {
	display: inline-block;
}
</style>
</head>
<body>
<ul>
	<li>Пункт 1</li>
	<li>Пункт 2</li>
	<li>Пункт 3</li>
</ul>

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

</body>
</html>

Вот результат работы кода:

Рисунок 5. Работа примера.

В этих примерах контейнеры списка <ul> имеют красную границу толщиной 1 пиксел. Но верхний список, в котором используется свойство display, включает в себя элементы списка. А вот элементы списка созданного с использованием свойства float выпадают из своего контейнера.

При этом на первый взгляд всё работает. Но давайте поменяем местами наши списки. Поставим список с классом menu-1 в коде перед списком с классом menu-2 (сейчас он ниже).

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

Рисунок 6. Работа примера.

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

Как решить эту проблему?

Для этого нужно использовать свойство clear, оно отменяет обтекание элементом другого элемента, если у того установлено свойство float.

Вот изменённый пример с использованием свойства clear:

<!DOCTYPE html>
<html>
<head>
	<title>Список горизонтально</title>
<style>
    ul{
        border: 1px solid red;
    }
    ul.menu-1 > li, ul.menu-2 > li {
        list-style: none;	/* Убираем маркеры списка */
        padding: 5px;
        margin: 2px;
        border: 1px solid #000000;
        background-color: #fffff0;
    }
    /* разещаем списки горизонтально */
    ul.menu-1 > li {
        float: left;
    }
    ul.menu-2 > li {
        display: inline-block;
    }
    /* отменяем обтекание */
    .menu-2{
    	clear: both;
    }
</style>
</head>
<body>
<ul>
	<li>Пункт 1</li>
	<li>Пункт 2</li>
	<li>Пункт 3</li>
</ul>

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

</body>
</html>

Видно что нижний список уже не обтикает верхний, элементы не наезжают друг на друга. Но в первом списке теги <li> всё ещё располагаются вне контейнера <ul>.

Рисунок 7. Работа примера.

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

Это делается при помощи псевдоэлемента. Вот код:

<!DOCTYPE html>
<html>
<head>
	<title>Список горизонтально</title>
<style>
    ul{
        border: 1px solid red;
    }
    ul.menu-1 > li, ul.menu-2 > li {
        list-style: none;	/* Убираем маркеры списка */
        padding: 5px;
        margin: 2px;
        border: 1px solid #000000;
        background-color: #fffff0;
    }
    /* разещаем списки горизонтально */
    ul.menu-1 > li {
        float: left;
    }
    /* создаём псевдоэлемент для clear: both; */
    ul.menu-1::after{
        content: '.';	/* обязательно контент */
        display: block;	/* обязательно блок */
        clear: both;
        height: 0;	/* чтобы не растягивал контейнер */
    }
    ul.menu-2 > li {
        display: inline-block;
    }
</style>
</head>
<body>
<ul>
	<li>Пункт 1</li>
	<li>Пункт 2</li>
	<li>Пункт 3</li>
</ul>

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

</body>
</html>

Теперь у нас 100% рабочий код.

Рисунок 8. Работа примера.

Этот приём со свойством float обычно используют при вёрстке сайтов для выравнивания столбцов, которые создаются тегами <div>. Таким способом мы получаем нормальное построение столбцов с требуемым выравниванием по высоте. Когда мы создаём меню, то нам, в большенстве случаев, не важна высота блоков, она практически всегда одинакова. Поэтому использование правила {display: inline-block} в этих случаях вполне оправдано.

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

Группа списков. Компоненты · Bootstrap. Версия v4.3.1

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



Базовые примеры


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


  • Cras justo odio

  • Dapibus ac facilisis in

  • Morbi leo risus

  • Porta ac consectetur ac

  • Vestibulum at eros

<ul>
  <li>Cras justo odio</li>
  <li>Dapibus ac facilisis in</li>
  <li>Morbi leo risus</li>
  <li>Porta ac consectetur ac</li>
  <li>Vestibulum at eros</li>
</ul>


Активные элементы


Добавьте в .list-group-item класс .active для обозначения текущего активного выбора.


  • Cras justo odio

  • Dapibus ac facilisis in

  • Morbi leo risus

  • Porta ac consectetur ac

  • Vestibulum at eros

<ul>
  <li>Cras justo odio</li>
  <li>Dapibus ac facilisis in</li>
  <li>Morbi leo risus</li>
  <li>Porta ac consectetur ac</li>
  <li>Vestibulum at eros</li>
</ul>


Неактивные элементы


Добавьте класс .disabled к элементу класса .list-group-item для придания последнему вида «неактивного». Заметьте, что некоторые элементы класса .disabled также потребуют JavaScript для полной деактивации их событий клика (например, ссылки).


  • Cras justo odio

  • Dapibus ac facilisis in

  • Morbi leo risus

  • Porta ac consectetur ac

  • Vestibulum at eros

<ul>
  <li>Cras justo odio</li>
  <li>Dapibus ac facilisis in</li>
  <li>Morbi leo risus</li>
  <li>Porta ac consectetur ac</li>
  <li>Vestibulum at eros</li>
</ul>


Ссылки и кнопки


Используйте <a> или <button> для создания элементов группы списка с возможностью возложить на них некое действие – с наличием «ховера» (наведения), неактивных и активных состояний – добавляя в них .list-group-item-action. Мы разделяем эти псевдоклассы для уверенности в том, что группы списков, созданные из не-интерактивных элементов (как <li> или <div>), не будут позволять поддержку касания или клика.


Удостоверьтесь, что не используете стандартные классы .btn в описанном выше случае.



<div>
  <a href="#">
    Cras justo odio
  </a>
  <a href="#">Dapibus ac facilisis in</a>
  <a href="#">Morbi leo risus</a>
  <a href="#">Porta ac consectetur ac</a>
  <a href="#">Vestibulum at eros</a>
</div>


В <button> вы можете также использовать атрибут disabled вместо класса .disabled. К сожалению, <a> не поддерживают отключенный атрибут.




Cras justo odio

Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros 

<div>
  <button type="button">
    Cras justo odio
  </button>
  <button type="button">Dapibus ac facilisis in</button>
  <button type="button">Morbi leo risus</button>
  <button type="button">Porta ac consectetur ac</button>
  <button type="button" disabled>Vestibulum at eros</button>
</div>



Смывание


Добавьте класс .list-group-flush чтобы удалить некоторые границы и закругленные углы, а также чтобы отображать элементы группы списка от края до края в родительском контейнере (например, в карточках).


  • Cras justo odio

  • Dapibus ac facilisis in

  • Morbi leo risus

  • Porta ac consectetur ac

  • Vestibulum at eros

<ul>
  <li>Cras justo odio</li>
  <li>Dapibus ac facilisis in</li>
  <li>Morbi leo risus</li>
  <li>Porta ac consectetur ac</li>
  <li>Vestibulum at eros</li>
</ul>



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


Добавьте .list-group-horizontal, чтобы изменить расположение элементов группы списков с вертикального на горизонтальное для всех точек останова. Или же выберите адаптивный вариант .list-group-horizontal-{sm|md|lg|xl}, чтобы сделать группу списков горизонтальной, начиная с min-width точки останова. В настоящее время горизонтальные группы списков не могут быть объединены с группами списков смывания.


ProTip: Хотите, чтобы элементы списка равной ширины были горизонтальными? Добавьте .flex-fill к каждому элементу группы списков.


  • Cras justo odio

  • Dapibus ac facilisis in

  • Morbi leo risus

<ul>
  <li>Cras justo odio</li>
  <li>Dapibus ac facilisis in</li>
  <li>Morbi leo risus</li>
</ul>
  • Cras justo odio

  • Dapibus ac facilisis in

  • Morbi leo risus

<ul>
  <li>Cras justo odio</li>
  <li>Dapibus ac facilisis in</li>
  <li>Morbi leo risus</li>
</ul>
  • Cras justo odio

  • Dapibus ac facilisis in

  • Morbi leo risus

<ul>
  <li>Cras justo odio</li>
  <li>Dapibus ac facilisis in</li>
  <li>Morbi leo risus</li>
</ul>
  • Cras justo odio

  • Dapibus ac facilisis in

  • Morbi leo risus

<ul>
  <li>Cras justo odio</li>
  <li>Dapibus ac facilisis in</li>
  <li>Morbi leo risus</li>
</ul>
  • Cras justo odio

  • Dapibus ac facilisis in

  • Morbi leo risus

<ul>
  <li>Cras justo odio</li>
  <li>Dapibus ac facilisis in</li>
  <li>Morbi leo risus</li>
</ul>

Контекстуальные классы


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


  • Dapibus ac facilisis in



  • Элемент основной группы списков

  • Дополнительный элемент группы списков

  • Элемент группы списка успешных действий

  • Элемент группы списка опасности

  • Элемент группы списка предупреждений

  • Элемент группы списка информации

  • Элемент группы с легким списком

  • Элемент группы темных списков

<ul>
  <li>Dapibus ac facilisis in</li>

  
  <li>Элемент основной группы списков</li>
  <li>Дополнительный элемент группы списков</li>
  <li>Элемент группы списка успешных действий</li>
  <li>Элемент группы списка опасности</li>
  <li>Элемент группы списка предупреждений</li>
  <li>Элемент группы списка информации</li>
  <li>Элемент группы с легким списком</li>
  <li>Элемент группы темных списков</li>
</ul>


Контекстуальные классы также работают с классом .list-group-item-action. Отметим наличие дополнения стилей «ховера» (наведения), которых нет в предыдущем примере. Активное состояние .active также поддерживается, применяйте его для индикации активного выбора в элементе контекстуальной группы списка.



<div>
  <a href="#">Dapibus ac facilisis in</a>

  
  <a href="#">Элемент основной группы списков</a>
  <a href="#">Дополнительный элемент группы списков</a>
  <a href="#">Элемент группы списка успешных действий</a>
  <a href="#">Элемент группы списка опасности</a>
  <a href="#">Элемент группы списка предупреждений</a>
  <a href="#">Элемент группы списка информации</a>
  <a href="#">Элемент группы с легким списком</a>
  <a href="#">Элемент группы темных списков</a>
</div>


Использование вспомогательных технологий

Использование цвета как дополнительного инструмента информативности доступно только в визуальной сфере, что ограничивает пользователей вспомогательных технологий, например, программ для чтения текста с экрана. Удостоверьтесь, что информация, обозначенная цветом, также доступна из самого контента (т.е. в тексте) или содержится в альтернативных средствах – таких как дополнительный скрытый в классе .sr-only текст.


Со значками


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



  • Cras justo odio
    14


  • Dapibus ac facilisis in
    2


  • Morbi leo risus
    1 

<ul>
  <li>
    Cras justo odio
    <span>14</span>
  </li>
  <li>
    Dapibus ac facilisis in
    <span>2</span>
  </li>
  <li>
    Morbi leo risus
    <span>1</span>
  </li>
</ul>


Стандартное содержимое


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



<div>
  <a href="#">
    <div>
      <h5>List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small>Donec id elit non mi porta.</small>
  </a>
  <a href="#">
    <div>
      <h5>List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small>Donec id elit non mi porta.</small>
  </a>
  <a href="#">
    <div>
      <h5>List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small>Donec id elit non mi porta.</small>
  </a>
</div>

Поведение JavaScript


Используйте плагин вкладок JavaScript – индивидуальный или через bootstrap.js — для расширения группы списков и создания панелей содержимого с возможностью навигации через TAB.


Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.

Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.

Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.

Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.


<div>
  <div>
    <div role="tablist">
      <a data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
      <a data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
      <a data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
      <a data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
    </div>
  </div>
  <div>
    <div>
      <div role="tabpanel" aria-labelledby="list-home-list">...</div>
      <div role="tabpanel" aria-labelledby="list-profile-list">...</div>
      <div role="tabpanel" aria-labelledby="list-messages-list">...</div>
      <div role="tabpanel" aria-labelledby="list-settings-list">...</div>
    </div>
  </div>
</div>

Используя атрибуты


Вы можете активировать навигацию в группе списка без JavaScript, а просто добавив data-toggle="list" в элемент. Используйте эти атрибуты в .list-group-item.


<!-- List group -->
<div role="tablist">
  <a data-toggle="list" href="#home" role="tab">Home</a>
  <a data-toggle="list" href="#profile" role="tab">Profile</a>
  <a data-toggle="list" href="#messages" role="tab">Messages</a>
  <a data-toggle="list" href="#settings" role="tab">Settings</a>
</div>

<!-- Tab panes -->
<div>
  <div role="tabpanel">...</div>
  <div role="tabpanel">...</div>
  <div role="tabpanel">...</div>
  <div role="tabpanel">...</div>
</div>


Через JavaScript


Задействуйте навигацию через TAB через JavaScript (каждый элемент списка надо активировать отдельно):


$('#myList a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show')
})

Вы можете активировать отдельный элемент списка несколькими способами:


$('#myList a[href="#profile"]').tab('show') // Select tab by name
$('#myList a:first-child').tab('show') // Select first tab
$('#myList a:last-child').tab('show') // Select last tab
$('#myList a:nth-child(3)').tab('show') // Select third tab

Эффект угасания


Чтобы заставить панель вкладок постепенно появиться, добавьте класс .fade в каждый элемент класса .tab-pane. На первой панели вкладки также должно быть выставлено значение .show, чтобы сделать начальное содержимое видимым.


<div>
  <div role="tabpanel">...</div>
  <div role="tabpanel">...</div>
  <div role="tabpanel">...</div>
  <div role="tabpanel">...</div>
</div>

Методы


$().tab


Активирует элемент списка и контейнер содержимого. Вкладка должна иметь или data-target, или href «нацеленный» на «узел контейнера» в DOM.


<div role="tablist">
  <a data-toggle="list" href="#home" role="tab">Home</a>
  <a data-toggle="list" href="#profile" role="tab">Profile</a>
  <a data-toggle="list" href="#messages" role="tab">Messages</a>
  <a data-toggle="list" href="#settings" role="tab">Settings</a>
</div>

<div>
  <div role="tabpanel">...</div>
  <div role="tabpanel">...</div>
  <div role="tabpanel">...</div>
  <div role="tabpanel">...</div>
</div>

<script>
  $(function () {
    $('#myList a:last-child').tab('show')
  })
</script>
.tab(‘show’)


Выбирает данный элемент списка и показывает связанные с ним панели. Любой другой элемент списка, который был ранее выбран, становится «невыбранным», а связанные с ним панели – скрытыми. Возвращается к функции-вызову до того, как показалась панель вкладки (например, до события shown.bs.tab).


$('#someListItem').tab('show')

События


При показе новой вкладки события запускаются в таком порядке:


  1. hide.bs.tab (на текущей активной вкладке)

  2. show.bs.tab (на вкладке, которая вот-вот покажется)

  3. hidden.bs.tab (на предыдущей активной вкладке, такое же, как для события hide.bs.tab)

  4. shown.bs.tab (на вкладке, только что ставшей активной и только что ставшей показанной, такое же, как для события show.bs.tab)

Если ни одна вкладка еще не была активной, события hide.bs.tab и hidden.bs.tab не произойдут.







Тип событияОписание
show.bs.tabИспользуйте события event.target и event.relatedTarget для «нацеливания» на соответственно на активную и предыдущую активную (если она доступна) вкладки.
shown.bs.tabЭто событие наступает при показе вкладки, после того, как она показана. Используйте события event.target и event.relatedTarget для «нацеливания» соответственно на активную и предыдущую активную (если она доступна) вкладки.
hide.bs.tabЭто событие наступает, когда вот-вот покажется новая вкладка (и предыдущая, т.о., вот-вот скроется). Используйте события event.target и event.relatedTarget для «нацеливания» соответственно на активную текущую вкладку и ту, которая вот-вот откроется.
hidden.bs.tabЭто событие наступает, когда показана новая вкладка (и предыдущая активная, т.о., скрылась). Используйте события event.target и event.relatedTarget для «нацеливания» соответственно на предыдущую активную и новую активную вкладки.
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

HTML Списки. Уроки для начинающих. W3Schools на русском


HTML Списки позволяют веб-разработчикам группировать набор связанных элементов в списках.

 HTML Пример списка

Неупорядоченный список:

  • Пункт

  • Пункт

  • Пункт

  • Пункт

Упорядоченный список:

  1. Первый пункт

  2. Второй пункт

  3. Третий пункт

  4. Четвёртый пункт

Попробуйте сами »

Неупорядоченный HTML Список

Неупорядоченный (ненумерованный) список начинается с тега <ul>. Каждый элемент списка начинается с тега <li>.

Элементы списка будут помечены маркерами (маленькие черные кружки) по умолчанию:


Неупорядоченный HTML Список — выберите маркер элемента списка

CSS свойство list-style-type используется для определения стиля маркера элемента списка:






ЗначениеОписание
discУстанавливает маркер элемента списка как маленький чёрный кружок (по умолчанию)
circleУстанавливает маркер элемента списка в виде маленького пустого кружка
squareУстанавливает маркер элемента списка в виде квадрата
noneЭлементы списка не будут отмечены (маркеры отсутствуют)




Упорядоченный HTML Список

Упорядоченный (нумерованный) список начинается с тега <ol>. Каждый элемент списка начинается с тега <li>.

Элементы списка будут помечены номерами по умолчанию:


Упорядоченный HTML Список — Атрибут Type

Атрибут type тега <ol> определяет тип маркера элемента списка:







ТипОписание
type=»1″Элементы списка будут пронумерованы цифрами (по умолчанию)
type=»A»Элементы списка будут пронумерованы заглавными буквами
type=»a»Элементы списка будут пронумерованы строчными буквами
type=»I»Элементы списка будут пронумерованы большими римскими цифрами
type=»i»Элементы списка будут пронумерованы маленькими римскими цифрами





HTML Списки описания

HTML также поддерживает списки описания.

Список описания — это список терминов с описанием каждого термина.

Тег <dl> определяет список описания, тег <dt> определяет термин (имя), а тег <dd> описывает каждый термин:


Вложенные HTML-списки

Список может быть вложенным (списки внутри списков):

Пример


<ul>

  <li>Coffee</li>

  <li>Tea

    <ul>

      <li>Black tea</li>

      <li>Green tea</li>

    </ul>

  </li>

  <li>Milk</li>

</ul>

Попробуйте сами »

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

Подсчет контрольного списка

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


Горизонтальный список с помощью CSS

HTML-списки можно стилизовать различными способами с помощью CSS.

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

Пример

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
}

li {

  float: left;

}

li a {

  display: block;

  color: white;

  text-align: center;

  padding: 16px;

  text-decoration: none;

}

li a:hover {

  background-color: #111111;

}

</style>

</head>

<body>

<ul>

  <li><a href=»#home»>Home</a></li>

  <li><a href=»#news»>News</a></li>

  <li><a href=»#contact»>Contact</a></li>

  <li><a href=»#about»>About</a></li>

</ul>

</body>

</html>

Попробуйте сами »

Резюме раздела

  • Используйте HTML елемент <ul> для определения неупорядоченного списка

  • Используйте CSS свойство list-style-type для определения маркера элемента списка

  • Используйте HTML элемент <ol> для определения упорядоченного списка

  • Используйте HTML атрибут type для определения типа нумерации

  • Используйте HTML элемент <li> для определения элемента списка

  • Используйте HTML элемент <dl> для определения списка описания

  • Используйте HTML элемент <dt> для определения термина описания

  • Используйте HTML элемент <dd> для описания термина в списке описания

  • Списки могут быть вложены в списки

  • Элементы списка могут содержать другие элементы HTML

  • Используйте CSS свойство float:left или display:inline для горизонтального отображения списка

HTML Упражнения


HTML Теги списка








ТегОписание

<ul> 		Определяет неупорядоченный (ненумерованный) список

<ol> 		Определяет упорядоченный (нумерованный) список

<li> 		Определяет пункты списка

<dl> 		Определяет список описания

<dt> 		Определяет термин в списке описания

<dd> 		Описывает термин в списке описания

Вопросы для самоконтроля

  • Для чего нужны HTML-списки?

  • Какие бывают HTML-списки?

  • Каким тегом определяется неупорядоченный HTML-список?

  • Каким тегом определяется упорядоченный HTML-список?

  • Каким тегом определяется каждый элемент в HTML-списке?

  • Как по умолчанию обозначаются элементы неупорядоченного HTML-списка?

  • Как по умолчанию обозначаются элементы упорядоченного HTML-списке?

  • Что такое список описаний?

  • Какой тег определяет список описаний?

  • Какой тег определяет термин (имя) в списке описаний?

  • Какой тег определяет описание каждого термина в списке описаний?

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

html — элементы горизонтального списка — qaru

Присоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.

Спросил

Просмотрено
171k раз

Итак, я попытался создать горизонтальный список для использования на новом веб-сайте, который я разрабатываю.Я попробовал ряд предложений, уже найденных в Интернете, таких как установка «float» влево и тому подобное — но ни одно из них не помогло, когда дело дошло до решения проблемы.

  ul # menuItems {
      фон: нет;
      высота: 50 пикселей;
      ширина: 100 пикселей;
      маржа: 0;
      отступ: 0;
    }
    ul # menuItems li {
      дисплей: встроенный;
      стиль списка: нет;
      маржа слева: авто;
      маржа-право: авто;
      верх: 0px;
      высота: 50 пикселей;
    }
    ul # menuItems li a {
      семейство шрифтов: Arial, Helvetica, sans-serif;
      текстовое оформление: нет;
      font-weight: жирнее;
      цвет: # 000;
      высота: 50 пикселей;
      ширина: авто;
      дисплей: блок;
      выравнивание текста: центр;
      высота строки: 50 пикселей;
    }

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

BSMP

3,96288 золотых знаков3131 серебряный знак4141 бронзовый знак

Создан 29 мар.

1

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

  ul> li {
    дисплей: встроенный блок;
    / * Вы также можете добавить сюда поля, чтобы он выглядел красивее * /
    масштабирование: 1;
    * дисплей: встроенный;
    / * это исправление необходимо для IE7- * /
}

Яниш

5,97344 золотых знака3131 серебряный знак6262 бронзовых знака

Создан 29 мар.

4

Намного лучше использовать inline-block , потому что вам больше не нужно использовать clear: оба в конце вашего списка.

Попробуйте это:

CSS:

  ul> li {
    дисплей: встроенный блок;
}

Посмотрите здесь: http://jsfiddle.net/shahverdy/4N6Ap/

Создан 29 мар.

Мостафа Шахверды

2,61711 золотых знаков2626 серебряных знаков4848 бронзовых знаков

Вы также можете использовать встроенные блоки, чтобы избежать плавающих элементов

, а затем стиль:

  li {
    / * с исправлением для IE * /
    дисплей: встроенный;
    дисплей: встроенный блок;
    масштабирование: 1;
    / *
    дополнительные стили, чтобы он выглядел красиво
    * /
 }

, так что вам не нужно ничего плавать, устраняя необходимость в clearfixes

Создан 29 мар.

Джейми

18966 бронзовых знаков

2

Я думаю, что простое решение, которое я нашел, ниже

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

Создан 20 ноя.

1

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

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

  Дисплей: строчно-блочный;
отступ: 10 пикселей 1%;
ширина: 30%

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

  ul # menuItems li: first-child {padding-left: 0;}
ul # menuItems li: last-child {padding-right: 0;}

Создан 29 мар.

алексасальбони

1,73611 золотых знаков1616 серебряных знаков2626 бронзовых знаков

Не тот ответ, который вы ищете? Просмотрите другие вопросы с метками html css или задайте свой вопрос.

lang-html

Stack Overflow лучше всего работает с включенным JavaScript

Ваша конфиденциальность

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

Принимать все файлы cookie

Настроить параметры

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

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

    в горизонтальной строке — qaru

    Присоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.

    Спросил

    Просмотрено
    267k раз

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

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

    TylerH

    19.3k5050 золотых знаков6565 серебряных знаков8686 бронзовых знаков

    задан 20 мая ’09 в 3: 362009-05-20 03:36

    Бабикер

    17.1k2626 золотых знаков7070 серебряных знаков120120 бронзовых знаков

    1

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

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

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

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

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

    Ом Сао

    4,65011 золотых знаков2727 серебряных знаков4646 бронзовых знаков

    ответ дан 20 май ’09 в 3:37

    hbwhbw

    15k55 золотых знаков4848 серебряных знаков5656 бронзовых знаков

    5

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

      #ul_top_hypers li {
    float: right;
}

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

    ответ дан 20 май ’09 г.

    Алексалекс

    442k189189 золотых знаков839839 серебряных знаков959959 бронзовых знаков

    2

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

    ответ дан 20 мая ’09 в 3: 402009-05-20 03:40

    Пол МориПол Мори

    14.7k99 золотых знаков5050 серебряных знаков5757 бронзовых знаков

    0

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

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

    Создан 18 июн.

    Тейхорнер

    31322 серебряных знака1515 бронзовых знаков

    У вас подойдет: 

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

    Создан 21 окт.

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

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

      #div_top_hypers {
    цвет фона: #eeeeee;
    дисплей: встроенный;
}
#ul_top_hypers {
    дисплей: гибкий;
    justify-content: пространство вокруг;
    тип-стиль-список: нет;
}

    Создан 02 сен.

    Мэттью ДжонсонМэттью Джонсон

    4,32522 золотых знака3434 серебряных знака4545 бронзовых знаков

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

    Badacadabra

    5,44377 золотых знаков2323 серебряных знака4242 бронзовых знака

    Создан 14 июн.

    Кумар Сакет

    7311 серебряный знак77 бронзовых знаков

    0

    lang-html

    Stack Overflow лучше всего работает с включенным JavaScript

    Ваша конфиденциальность

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

    Принимать все файлы cookie

    Настроить параметры

    Центрирование элементов списка по горизонтали (немного сложнее, чем вы думаете)

    Обновление , апрель 2013 г .: Эта статья довольно старая.Это не очень сложно. Просто введите текст по центру списка (например, ul.nav {text-align: center;} ) и элементы списка inline-block (например, ul.nav li {display: inline-block;} ). Если по какой-то причине вы хотите сделать это с полем, посмотрите width: fit-content; .

    Текущий стандарт кодирования меню — неупорядоченные списки. Он не такой семантический, как тег