如何在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 中的多列的正确方法是什么？

谢谢！

铁螳螂7x

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

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

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

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

铁螳螂7x

Answer 1

据我所知，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>

Answer 2

gsp 中的 HTML 代码生成与您编写的完全相同的 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>