li 标签的垂直和水平编号

Question

抱歉，我不确定如何称呼标题。

我正在使用 joomla 并有一个创建 ul 标签和许多 li 的菜单。在每个 li 标签中，页面都有一个 link。我选择给我的 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

使用列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>

li 标签的垂直和水平编号

vertical and horizontal numbering of li tags

html

css

jquery

html-lists