如何在水平方向创建多级ul li

Question

我正在尝试水平开发ul li，其中父级将是垂直的，而子级将水平对齐

码

 <ul id="horizontal-list" class="horizontal-list">
   <li>Motors</li>
    <?php
     $query = $this->db->get('countries');
     $countries = $query->result();
     foreach ($countries as $value) { ?>
    <?php if (isset($_GET['country']) && in_array($value->id, @$_GET['country'])) { ?>
    <li class="">
     <span><?= (in_array($value->id, @$_GET['country'])) ? $value->name : null ?>
     <a class="button" id="<?= $value->id ?>" name="country" style="color: white">×</a>
    <?php
      $query = $this->db->get('cities');
      $city = $query->result();
      foreach ($city as $city_value) { ?>
   <?php if (isset($_GET['city']) && in_array($city_value->id, @$_GET['city'])) {
      if ($city_value->country_id == $value->id) {
                                    ?>
     <li class="btn-primary btn-xs">
       <span><?= (in_array($city_value->id, @$_GET['city'])) ? $city_value->name : null ?>
       <a class="button" id="<?= $city_value->id ?>" name="city" style="color: white">×</a>
        </span>
       </li>
   <?php }
     }
  } ?>
          </span>
       </li>
     <br/>
  <?php } ?>
   <?php } ?>
</ul>

CSS

<style>
        ul {
            list-style-type: none;
        }

        ul.horizontal-list {
            display: flex;
        }

        ul.horizontal-list ul.subhorizontal-list {
            display: flex;
            flex-direction: row;
        }
    </style>

结果：

country city country city country city

我想要什么

country city
country city
country city

Answer 1

使用flex-direction：column ...

git push -u origin issue_${1}

ul {
    list-style-type: none;
}

ul.horizontal-list {
    display: flex;
    flex-direction:column;
}

ul.horizontal-list ul.subhorizontal-list {
    display: flex;
    flex-direction: row;
}