为ul-li元素提供自定义对齐

Question

HTML，CSS可在以下链接中找到。

https://jsfiddle.net/td5ruzh7/6/

我需要利用小尺寸ul元素下显示的空格，并使每个ul元素下方显示的ul元素向上移动。请查看当前安排的屏幕截图以及下面所需的安排。

或者，如果你能给我一些更好的选择，请告诉我。

当前安排： 要求的安排：

Answer 1

如果您总是在一行中有四个分类，请尝试以下方法：

  <div>
        <div class="col">
            <ul>
              <li> <label> Category 1</label></li>
              <li><a href="#"> Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
            </ul>    
            <ul>
              <li> <label> Category 5</label></li>
              <li><a href="#"> Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
            </ul>
            <ul>
              <li> <label> Category 9</label></li>
              <li><a href="#"> Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
            </ul>
        </div>
        <div class="col">
            <ul>
              <li> <label> Category 2</label></li>
              <li><a href="#"> Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#"> Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
            </ul>
            <ul>
              <li> <label> Category 6</label></li>
              <li><a href="#"> Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#"> Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
            </ul>
            <ul>
              <li> <label> Category 10</label></li>
              <li><a href="#"> Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#"> Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
            </ul>
        </div>
        <div class="col">
            <ul>
              <li> <label> Category 3</label></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
            </ul>
            <ul>
              <li> <label> Category 7</label></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
            </ul>
            <ul>
              <li> <label> Category 11</label></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
            </ul>
        </div>
        <div class="col">
            <ul>
              <li> <label> Category 4</label></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
            </ul>
            <ul>
              <li> <label> Category 8</label></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
            </ul>
            <ul>
              <li> <label> Category 12</label></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
            </ul>
        </div>
    </div>

CSS：

div div.col {
    float: left;
}
ul {
    list-style-type: none;
    border: 1px solid red;
}