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

Question

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

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

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

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

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

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

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

            </li>

        </ul>

    }
}

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

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

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

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

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

Answer 1

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

Обновлено.

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

Answer 2

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

Answer 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 class="hr">
    @{
        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>

БЛОГ НА HUSL

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

Ответы (3 шт):