如何用CSS将列表中的项目组织成列？[重复]

Question

这个问题在这里已经有了答案:

如何从一个无序列表中创建多列？ (2个回答)

封闭 上月.

如何只用CSS把一个项目列表组织成4列？

像这样。https:/imgur.comamPdNnNi

这是我的代码。

                                <div class="cus-field-item tenhocomodidades cus-wid-12">
                        <div class="cus-field-title">
                            Comodidades no imóvel                       </div>
                        <div class="cus-field-content">
                        <div class="cus-field-cont-item">Academia</div><div class="cus-field-cont-item">Praça</div><div class="cus-field-cont-item">Biblioteca</div><div class="cus-field-cont-item">Rampa para deficientes</div><div class="cus-field-cont-item">Sala de Cinema</div><div class="cus-field-cont-item">Salão de Jogos</div><div class="cus-field-cont-item">Nenhuma</div><div class="cus-field-cont-item">Churrasqueira</div><div class="cus-field-cont-item">Parquinho</div><div class="cus-field-cont-item">Quadra de Basquete</div><div class="cus-field-cont-item">Quadra de Vôlei</div><div class="cus-field-cont-item">Piscina</div><div class="cus-field-cont-item">Elevador</div><div class="cus-field-cont-item">Quadra de Futebol</div><div class="cus-field-cont-item">Quintal</div><div class="cus-field-cont-item">Salão de Festas</div><div class="cus-field-cont-item">Quadra de Squash</div><div class="cus-field-cont-item">Portaria</div><div class="cus-field-cont-item">Garagem</div><div class="cus-field-cont-item">Brinquedoteca</div><div class="cus-field-cont-item">Internet</div><div class="cus-field-cont-item">Quadra de Tênis</div><div class="cus-field-cont-item">Sacada</div><div class="cus-field-cont-item">Sauna</div>                     </div>
                    </div>

谢谢你

Answer 1

通常，这些小列表是4个独立的列表。这对于不同的布局原因是有用的，也可以对喜欢的项目进行分组。所以，把它作为一个选项--但对于真正的列--你可以使用 https:/developer.mozilla.orgen-USdocsWebCSScolumns。

ul {
  list-style: none;
  margin: 0;
  padding: 0;
} /* remove defaults */

ul {
  columns: 4;
}

<ul>
  <li>one</li>
  <li>one</li>
  <li>one</li>
  <li>one</li>
  <li>one</li>
  <li>one</li>
  <li>one</li>
  <li>one</li>
  <li>one</li>
  <li>one</li>
  <li>one</li>
  <li>one</li>
  <li>one</li>
  <li>one</li>
</ul>

但是--你可以使用flexbox或者网格--或者根据情况使用其他一些方式。