Question

如何仅使用CSS将项目列表分为4列？

这是我的代码：

                                <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.org/en-US/docs/Web/CSS/columns

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或grid-或根据情况使用其他几种方式。

如何使用CSS将列表项组织成列？

1 个答案: