如何在html中创建这样的动态列表[关闭]

Question

我一直在浏览 Materialize css 并找到了 Collections 和 Collapsibles 等组件。然而，这些并不是我所需要的。到目前为止，我的网页设计技能非常原始，所以我想问我应该如何进行。我想要的预期图像如下：

有没有先完成的解决方案？如果没有我该怎么做。如果我需要从头开始，我是否使用文本框和链接搜索功能？

到目前为止，我所做的是将文本框和集合作为单独的项目。

<div class="row">
                <div class="input-field col s6">
                    <input id="events" type="text" class="validate">
                    <label for="users">Events</label>
                </div>


                <div class="input-field col s6">
                    <input id="groups" type="text" class="validate">
                    <label for="groups">Groups</label>
                </div>
                <ul class="collection col s6">
                    <li class="collection-item">Alvin</li>
                    <li class="collection-item">Alvin</li>
                    <li class="collection-item">Alvin</li>
                    <li class="collection-item">Alvin</li>
                </ul>

                <ul class="collection col s6">
                    <li class="collection-item">Alvin</li>
                    <li class="collection-item">Alvin</li>
                    <li class="collection-item">Alvin</li>
                    <li class="collection-item">Alvin</li>
                </ul>
            </div>

这将创建以下内容：

Answer 1

你仍然需要创建你需要的元素，我查看了 materializecss.com，它看起来像 bootstrap 之类的基础，所以有一些样式与 materialize css 内置的类一起使用，但是你仍然需要构建像 glyphicon 这样的元素来删除/擦除用户 并且您将不得不使用 jquery 将用户名的第一个字母插入用户图标的圆形圆圈中。

查看此页面以制作圆圈，您可以将其调整为您的项目 http://materializecss.com/media-css.html

使用它来为圆圈创建颜色 http://materializecss.com/color.html

例如，如果您希望收藏可折叠，您可以添加类 做类似的事情

玩玩并习惯地基。