html框的垂直对齐方式

Question

I am displaying US state names via php loop which are basically my posts. These are fully responsive but client wants state names in vertical alignment.
Here is how these are displaying right now

My client want these in this way

How can I do this?

Answer 1

Try columns property of unordered list.

ul {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
  list-style: none
}

<ul>
  <li>Alabama</li>
  <li>Alaska</li>
  <li>Arizona</li>
  <li>New York</li>
  <li>Texas</li>
  <li>Virginia</li>
</ul>

</div>