RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 1146331
Accepted
Potion
Potion
Asked:2020-06-27 22:21:10 +0000 UTC2020-06-27 22:21:10 +0000 UTC 2020-06-27 22:21:10 +0000 UTC

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 3 个回答
  • 10 Views

3 个回答

  • Voted
  1. Aziz Umarov
    2020-06-27T22:40:18Z2020-06-27T22:40:18Z

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

    更新。

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

    • 1
  2. Vladimir Rodichev
    2020-06-27T22:42:14Z2020-06-27T22:42:14Z

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

    • 0
  3. Best Answer
    Potion
    2020-07-08T20:41:45Z2020-07-08T20:41:45Z

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

     <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

相关问题

  • 使用嵌套类导出 xml 文件

  • 分层数据模板 [WPF]

  • 如何在 WPF 中为 ListView 手动创建列?

  • 在 2D 空间中,Collider 2D 挂在玩家身上,它对敌人的重量相同,我需要它这样当它们碰撞时,它们不会飞向不同的方向。统一

  • 如何在 c# 中使用 python 神经网络来创建语音合成?

  • 如何知道类中的方法是否属于接口?

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    如何从列表中打印最大元素(str 类型)的长度?

    • 2 个回答
  • Marko Smith

    如何在 PyQT5 中清除 QFrame 的内容

    • 1 个回答
  • Marko Smith

    如何将具有特定字符的字符串拆分为两个不同的列表?

    • 2 个回答
  • Marko Smith

    导航栏活动元素

    • 1 个回答
  • Marko Smith

    是否可以将文本放入数组中?[关闭]

    • 1 个回答
  • Marko Smith

    如何一次用多个分隔符拆分字符串?

    • 1 个回答
  • Marko Smith

    如何通过 ClassPath 创建 InputStream?

    • 2 个回答
  • Marko Smith

    在一个查询中连接多个表

    • 1 个回答
  • Marko Smith

    对列表列表中的所有值求和

    • 3 个回答
  • Marko Smith

    如何对齐 string.Format 中的列?

    • 1 个回答
  • Martin Hope
    Alexandr_TT 2020年新年大赛! 2020-12-20 18:20:21 +0000 UTC
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5