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

Question

I am trying to develop ul li horizontally where parent will be vertical and child will be align besides them horizontally

code

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

result:

country city country city country city

what i want

country city
country city
country city

Answer 1

Use flex-direction:column...

 ul { list-style-type: none; } ul.horizontal-list { display: flex; flex-direction:column; } ul.horizontal-list ul.subhorizontal-list { display: flex; flex-direction: row; } 

 <ul class="horizontal-list"> <li>country city</li> <li>country city</li> <li>country city</li> </ul> |