Как отобразить список на несколько столбцов в 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> 

я думал, что класс = «уль класс =» столбцы»столбец подсчета =„3“будет работать как прямой HTML, но я был неправ, я до сих пор получить один (длинный) список.

Что такое правильный способ сделать этот список в несколько колонок в GSP с помощью заводной тегов или правильный код HTML?

Спасибо!

ИК onmantis7x

***** Успешное ОБНОВЛЕНИЕ !!! *****

на основе ответа я принял, вот код, который я написал:

<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

Насколько мне известно, column-count это свойство CSS, а не атрибут, который может быть применен к ul тега. Вы должны иметь column-count, определенный через style= или в отдельный файл css (предпочтительный способ из-за SoC).

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

Кроме того, у вас есть список CheckBox входов в пределах вашего 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

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'} не имеет никакого смысла, и вы should't поместить значения, как есть, это потенциальная уязвимость):

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