li标签的垂直和水平编号

Question

对不起，我不确定该怎么称呼标题。

我正在使用joomla并有一个菜单创建一个ul标签和许多li。在每个li标签中都有一个指向页面的链接。我选择给我的li标签编号。

现在订单是这样的：

如何使用CSS / html或任何其他解决方案？

Answer 1

如果您不太关心向后浏览器兼容性，可以使用CSS列：

ul {
    column-count: 3;
    column-gap: 5px;
}

ul li {
    display:block;
}

这应该大致给你你想要的东西，但它不适用于IE9或更早版本。不过，您现在应该完全支持Chrome，Firefox和Safari。

参考此处：http://www.w3schools.com/css/css3_multiple_columns.asp

Answer 2

使用coloumns css规则

HTML

 <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>

的CSS：

ul {
    -webkit-columns: 100px 3; /* Chrome, Safari, Opera */
    -moz-columns: 100px 3; /* Firefox */
    columns: 100px 3;
}

注意：适用于ie12 +

Answer 3

在ul

上设置CSS columns属性

li{list-style-type: decimal-leading-zero;}
ul {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-width: 150px;
  -moz-column-width: 150px;
  column-width: 150px;
  /* or this for short code
  -webkit-columns: 150px 3;
  -moz-columns: 150px 3;
  columns: 150px 3;
  */
}

<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
  <li>item7</li>
  <li>item8</li>
  <li>item9</li>
</ul>