主页 / 问题 / 1146331
Accepted
Potion
Asked:2020-06-27 22:21:10 +0800 CST2020-06-27 22:21:10 +0800 CST

RazorPages 中的水平列表

  • 772

您需要创建一个水平列表。有风格

<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 行。这是一个元素，必须是水平的，即。上图，然后是一条线，然后是一条线，然后是一条线。

一组这样的元素应该是水平的。方案如下

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

3 个回答

  1. 将 ul 移出循环。您每次创建一个 ul ，每个循环一个 li 元素。

    更新。

    正如他们所说的那样，让第一个愚蠢的静态没有循环。然后在重复元素上循环。

    • 1

  2. 删除 ul 后的 li。将所有 p 替换为 li。或者重写样式。正如另一个人指出的答案，为循环取出 ul 。

    • 0
  3. Best Answer

    没错，你只需要将样式本身重写为这个，并在循环上方显示标签

     <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>
    • 0

相关问题