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

Содержание

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 в цикл.

Обновлено.

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

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

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

 <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

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

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

Почта

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

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

Почта

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

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

Транспоны данных из строк в столбцы (или наоборот) в Excel для Mac

Excel для Microsoft 365 для Mac Excel 2021 for Mac Excel 2019 для Mac Excel 2016 для Mac Еще.

..Меньше

При наличии листа с данными в столбцах, которые нужно повернуть, чтобы упорядочить строки, можно использовать функцию Транспонирование. Она позволяет повернуть данные из столбцов в строки и наоборот.

Например, если данные выглядят так, как показано ниже, где продажи по регионам указаны в верхней части листа, а продажи по кварталам — в левой части листа.

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

Ниже рассказывается, как это сделать.

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

Примечание: Обязательно скопируйте данные. Это не получится сделать с помощью команды Вырезать или клавиш CONTROL+X.
Выделите первую ячейку диапазона, в который требуется вставить данные, а затем на вкладке Главная щелкните стрелку рядом с командой Вставить и выберите пункт Транспонировать.

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

Повернув данные, можно удалить исходные.

org/ListItem»>
Если данные содержат формулы, Excel автоматически обновляет их в соответствие с новым расположением. Убедитесь, что в этих формулах используются абсолютные ссылки. Если они не используются, перед поворотом данных можно переключаться между относительным и абсолютным ссылками.
Если данные хранятся в таблице Excel, функция Транспонировать будет недоступна. В этом случае вы можете сначала преобразовать таблицу в диапазон с помощью команды
Преобразовать в диапазон на вкладке Таблица или воспользоваться функцией ТРАНСП, чтобы повернуть строки и столбцы.
Если вам требуется часто поворачивать данные для просмотра под разными углами, стоит создать сводную таблицу. С ее помощью вы сможете быстро свести данные, перетащив поля из области строк в область столбцов (и наоборот) в списке полей сводной таблицы.

angular — Как центрировать горизонтальный список в css

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

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

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

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

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

Как мне центрировать список ul li в css?

CSS center ul list

Я использую очень старую версию angular

это мой css

 .pagination-sm {
    верхняя граница: 20px;
    выравнивание текста: по центру;
}
.pagination-sm {
    курсор: указатель;
}
. pagination-см ул {
    выравнивание текста: по центру;
}
.pagination-sm li a:hover {
    цвет фона: #4cd94a;
}
.pagination-sm li {
    отображение: встроенный блок;
    черный цвет;
    граница: сплошная 1px;
}
.pagination-sm {
    поля: 0 5px 0 5px;
}

и соответствующий html

 <нижний колонтитул>

В браузере, который выглядит так

 
  Предыдущая

 active, disabled: page.disabled}">1

 2
< ng-click="selectPage(page.number)">3

4

5

Далее

Единственное решение, которое мне удалось придумать, это использовать поле справа до тех пор, пока оно не будет сдвинуто к центру, что явно не идеально. Есть ли другие предложения?

css
angular
html-списки

Пробовали ли вы использовать flexbox?

 ул {
  ширина: 100%;
  дисплей: гибкий;
  выравнивание содержимого: по центру;
  выравнивание элементов: по центру;
  стиль списка: нет;
  маржа: 0;
  заполнение: 0;
}

ли {
  поле: 0 20px;
}

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

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

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

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

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

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

Требуется, но никогда не отображается

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

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

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

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

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

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

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

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

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

Крас Хусто Одио
Dapibus ac facilisis в
Морби лео рисус

Крас Хусто Одио
Dapibus ac facilisis в
Морби лео рисус

Крас Хусто Одио
Dapibus ac facilisis в
Морби лео рисус

Крас Хусто Одио
Dapibus ac facilisis в
Морби лео рисус

Крас Хусто Одио
Dapibus ac facilisis в
Морби лео рисус

Крас Хусто Одио
Dapibus ac facilisis в
Морби лео рисус

Показать код Изменить в песочнице

            
                <ул>
                    Крас Хусто Одио
                    Dapibus ac facilisis в
                    Морби лео рисус
                
                <ул>
                    Крас Хусто Одио
                    Dapibus ac facilisis в
                    Морби лео рисус
                
                <ул>
                    Крас Хусто Одио
                    Dapibus ac facilisis в
                    Морби лео рисус
                
                <ул>
                    Крас Хусто Одио
                    Dapibus ac facilisis в
                    Морби лео рисус
                
                <ул>
                    Крас Хусто Одио
                    Dapibus ac facilisis в
                    Морби лео рисус
                
                <ул>
                    Крас Хусто Одио
                    Dapibus ac facilisis в
                    Морби лео рисус

Свиток

Добавьте . overflow-auto и .position-relative , чтобы получить полосу прокрутки.

Деталь 1
Пункт 2
Пункт 3
Пункт 4
Пункт 5
Пункт 6
Пункт 7
Пункт 8
Пункт 9
Пункт 10
Пункт 11
Пункт 12
Пункт 13
Деталь 14
Пункт 15

Показать код Изменить в песочнице

            
                <ул>
                    Элемент 1
                    Элемент 2
                    Элемент 3
                    Элемент 4
                    Элемент 5
                    Элемент 6
                    Элемент 7
                    Элемент 8
                    Элемент 9
                    Элемент 10
                    Элемент 11
                    Элемент 12
                    Элемент 13
                    Элемент 14
                    Элемент 15

Ссылки

Добавить кнопку с . btn и .btn-link для получения ссылки.

Показать код Изменить в песочнице

            
                <ул>

Изображения

Карточки

Замените ul на div на . card-group и li на div на .card , чтобы сохранить фотографии одинакового размера.

Название карты

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

Название карточки

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

Название карты

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

Показать код Изменить в песочнице

<дел> <дел>