如何在html

Question

我一直在浏览Materialise 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

如果您希望集合可折叠，则可以添加类 做点什么

玩耍并习惯基金会。