如何在 gsp 中将列表显示为多列

Question

在我的 groovy/grails 应用程序中，我可以获得带有复选框的列表（感谢您的提示）。

但是我似乎无法得到的是如何在多列中显示列表。

这是我的 gsp 中的代码：

<ul class="columns" column-count="3">
        <g:each in="${name}" var="fileName">
               <g:checkBox checked="false" name="${ 'fileName'}"/> ${fileName <br>
        </g:each>
</ul>

我认为 class="ul class="columns" column-count="3" 会直接 html 但我错了。我仍然得到一个（长) 列表。

使用 groovy 标签或正确的 html 代码将此列表放入 gsp 中的多列的正确方法是什么？

谢谢！

ironmantis7x

***** 更新成功！！！ *****

根据我接受的答案，这是我写的代码：

<style>
    .columns2 {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2; }
    </style>

        <ul class="columns2">
            <g:each in="${name}" var="fileName">
                 <g:checkBox checked="false" name="${ 'fileName'}"/> ${fileName}<br>
            </g:each> 
        </ul>   
    </div>

感谢帮派！你总是帮助我扩展我的知识库，并在我喜欢做的事情上取得更大的成功，那就是编程软件！

ironmantis7x

Answer 1

HTML gsp 中的代码生成与您编写的 html 完全相同的代码，将按原样发送到浏览器。因此 <ul class="columns" column-count="3"> 在您的浏览器中将与 <ul class="columns" column-count="3"> 相同。

但是您缺少列表元素，并且只放置了一个多行（由
分隔）文本块。你可能想要这个：

<ul class="columns" column-count="3">
    <g:each in="${name}" var="fileName">
       <li><g:checkBox checked="false" name="${ 'fileName' }"/> ${fileName </li>
    </g:each>
</ul>

或者很可能是这样（因为你没有在你的代码中关闭 }，并且 ${ 'fileName'} 没有任何意义。你也不应该按原样放置值，它是潜在的安全漏洞）：

<ul class="columns" column-count="3">
    <g:each in="${name}" var="fileName">
       <li><g:checkBox checked="false" name="${fileName.encodeAsHTML()}"/> ${fileName.encodeAsHTML()}</li>
    </g:each>
</ul>

Answer 2

据我所知，column-count 是一个 CSS 属性，不是可以应用于 ul 标签的属性。您需要通过 style= 或在单独的 css 文件中定义 column-count（首选方式，因为 SoC）。

.columns {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}

另外，您的 ul 标签中有一个复选框输入列表。您应该有一个 li（列表项）标签列表：

<ul class="columns">
    <g:each in="${name}" var="fileName">
       <li><g:checkBox checked="false" name="${ 'fileName' }"/> ${fileName} </li>
    </g:each>
</ul>

如何在 gsp 中将列表显示为多列

how to display a list into multiple columns in gsp

html

grails

gsp