Question

尝试以垂直顺序显示列表的顺序。

我有6个列表，我需要显示前三个应显示在左侧并保留在右侧。

预期产出：

a d
b e
c f

当前输出：

a b
c d
e f

HTML：

<ul>
    <li class="list">
        <a>a</a>
        <ul>
            <li>1</li>
        </ul>
    </li>
    <li class="list">
        <a>b</a>
        <ul>
            <li>2</li>
        </ul>
    </li>
    <li class="list">
        <a>c</a>
        <ul>
            <li>3</li>
        </ul>
    </li>
    <li class="list">
        <a>d</a>
        <ul>
            <li>4</li>
        </ul>
    </li>
    <li class="list">
        <a>e</a>
        <ul>
            <li>5</li>
        </ul>
    </li>
    <li class="list">
        <a>f</a>
        <ul>
            <li>6</li>
        </ul>
    </li>
</ul>

我附上了我的尝试： Demo

它应该支持IE8

Answer 1

尝试使用

ul {
  column-count: 2;
}

Answer 2

根据此回答https://stackoverflow.com/a/24924657/2983435，对您的CSS进行了一些调整：

ul {
    list-style-type: disc;
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
    list-style-position: inside;
}
.list{
    border:1px solid red;
}

Answer 3

＆＃13;

ul {
   list-style:none;
    -webkit-columns: 2;
   }
.list{
    border:1px solid red;
}

＆＃13;

垂直订单列表商品通常只需要-webkit-columns: 2;

Answer 4

不幸的是，给予您的任何解决方案（即column和flexbox）的最大阻碍是您需要解决方案才能使用IE8。没有不幸的是，当试图支持那些古老的浏览器时，银弹。

我为您提供了一些CSS，可以为更新的浏览器添加flexbox解决方案（Demo），但是您需要为IE8构建一个使用display: block或display: table因为IE9或IE8不支持Flexbox。

ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  height: 150px;
}

li {
  height: 50px;
}

希望有所帮助。

如何使用css以垂直方式显示列表

4 个答案: