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

css3 — Как из вертикального списка — сделать горизонтальный

Вопрос задан 5 лет 2 месяца назад

Изменён 5 лет 2 месяца назад

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

Как из вертикального списка:

Сделать, чтобы он был горизонтальный? Вот кусочек кода:

• css3
• html5
• списки

2

Через display: inline-block для li

.horisontal-ul li {
   display: inline-block;
}

<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>
</ul>
          
         

ul {
  display: flex;
}
li {
  margin-left: 20px;
}
li:nth-child(1){
  margin:0;
}

<nav>
  <ul>
    <li>Главная</li>
    <li>Обучения</li>
    <li>Конференция</li>
    <li>О нас</li>
  </ul>
</nav>

Вариантов несколько.

1 Варинат. C помощью flex:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* 1. Flex */
nav ul {
  display: flex;
  align-items: center;
  justify-content: center;
}

nav ul li {
  margin: 0 1rem;
}

<nav>
  <ul>
    <li>
      <a href="#">Главная</a>
    </li>
    <li>
      <a href="#">Обучение</a>
    </li>
    <li>
      <a href="#">Конференции</a>
    </li>
    <li>
      <a href="#">О нас</a>
    </li>
  </ul>
</nav>

2 Вариант. inline-block:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* 2. inline-block */
nav ul {
  text-align: center;
}

nav ul li {
  margin: 0 1rem;
  display: inline-block;
}

<nav>
  <ul>
    <li>
      <a href="#">Главная</a>
    </li>
    <li>
      <a href="#">Обучение</a>
    </li>
    <li>
      <a href="#">Конференции</a>
    </li>
    <li>
      <a href="#">О нас</a>
    </li>
  </ul>
</nav>

3 Вариант. float: left:

* {
  box-sizing: border-box;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* 3. float */
nav ul {
  text-align: center;
  overflow: hidden;
}

nav ul li {
  padding: 0 1rem;
  float: left;
  width: 25%;
}

<nav>
  <ul>
    <li>
      <a href="#">Главная</a>
    </li>
    <li>
      <a href="#">Обучение</a>
    </li>
    <li>
      <a href="#">Конференции</a>
    </li>
    <li>
      <a href="#">О нас</a>
    </li>
  </ul>
</nav>

4 Вариант. table:

* {
  box-sizing: border-box;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* 4. table */
nav ul {
  text-align: center;
  display: table;
  width: 100%;
}

nav ul li {
  padding: 0 1rem;
  display: table-cell;
  width: 25%;
}

<nav>
  <ul>
    <li>
      <a href="#">Главная</a>
    </li>
    <li>
      <a href="#">Обучение</a>
    </li>
    <li>
      <a href="#">Конференции</a>
    </li>
    <li>
      <a href="#">О нас</a>
    </li>
  </ul>
</nav>

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

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

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

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 строчки за одну итерацию. Это — один элемент и он должен быть по горизонтали, т.е. картинка сверху, потом строчка, потом строчка, потом строчка.

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

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

• c#
• html
• css
• asp.net-core
• razor

Вынесите ul за цикл. Вы каждый раз создаёте ul с одним элементом li в цикл.

Обновлено.

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

2

После ul уберите li. Замените все p на li. Или перепишите стили. И как в ответе другом указано, ul вынести за Цикл.

3

Все правильно, нужно просто переписать сам стиль на такой и вывести тег выше цикла

 <style>
        ul.hr {
            list-style: none;
            display: flex;
            align-items: flex-end;
            margin: 0;
            padding: 4px;
        }
        ul.hr li {
            margin-right: 5px;
            border: 1px solid #000;
            padding: 3px;
        }
    </style>

И вот такой код будет выводить элементы друг за другом горизонтально, а внутри элементов строчки и картинки — вертикально.

<ul>
    @{
        if (Model.TopReaded == null)
        {
            return;
        }
        foreach (var topReadedBook in Model.TopReaded)
        {
            <li>
                @topReadedBook.Key.RateOfBook
                @topReadedBook.Key.ReadCount
                @topReadedBook.Key.BookName
                @topReadedBook.Key.AuthorPseudonym
            </li>
        }
    }
</ul>

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

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

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

Как сделать так, чтобы список HTML отображался горизонтально, а не вертикально, используя только CSS?

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

спросил 13 лет, 1 месяц назад

Изменено 1 год, 9 месяцев назад

Просмотрено 176 тысяч раз

Мне это нужно, потому что я хочу, чтобы меню (созданное из HTML-списка) отображалось горизонтально.

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

Я также хотел бы убрать отступы подсписков. Является ли это возможным?

• html
• css
• меню
• позиционирование
• horizontallist

Вам придется использовать что-то вроде ниже

 #меню ул{
  стиль списка: нет;
}
#меню ли{
  дисплей: встроенный;
}

 <дел>
  <ул>
    
Первый пункт меню
    
Второй пункт меню
    
Третий пункт меню
  

 #menu ul {
  стиль списка: нет;
  маржа: 0;
  заполнение: 0;
  дисплей: встроенный гибкий
} 

 <дел>
  <ул>
    
1 пункт меню
    
2 пункт меню
    
3 пункта меню