如何在 li 元素的水平组中显示列表？

Question

我有一个很长的 li 元素列表，超过 30 个项目。当我在 ul menu 下拉列表中显示它时，列表会垂直向下延伸，这需要浏览器 window 向下滚动才能查看每个列表元素。

我想做的是将列表中的每一行分组为 显示 3 li 个元素，而不是 ul 菜单中每行一个 。

我尝试将菜单使用的样式 .sub-menu li 设置为 display: inline as suggested here 以内联显示 li 元素，但这对水平排序没有影响。

所以不是这个：

吉姆
简
杰克
琼斯
杰克逊
强尼

它会像这样显示（列表中每三个 li 元素水平分组）：

简约翰贾里德

吉姆詹姆士琼斯

问题：

如何以 n li 元素的水平分组显示列表？

在我当前的设置中，我使用此 CSS 作为菜单：

nav li:hover .sub-menu {
    z-index: 2;
    opacity: 1;
    min-width: 100px;
}

.sub-menu {
    width: 100%;
    padding: 0px 0px;
    position: absolute;
    top: 100%;
    left: 0px;
    z-index: -1;
    opacity: 0;
    overflow: hidden;
    transition: opacity linear 0.15s;
    box-shadow: 0px 2px 3px rgba(0,0,0,0.2);
    background: #425563;
    text-align: center;
    display: inline-block;
}

    .sub-menu li {
        display: inline-block;
        font-size: 15px;
        float: left;
        margin-top: 0px;
    }

        .sub-menu li a {
            padding: 10px 5px;
            display: block;
            text-decoration: none;
            text-align: left;
            z-index: 3;
        }

            .sub-menu li a:hover, .sub-menu .current-item a {
                background: #01a982;
                -moz-box-shadow: 0 0 5px 0px #888;
                -webkit-box-shadow: 0 0 5px 0px #888;
                box-shadow: 0 0 5px 0px #888;
                color: #000;
            }


            .sub-menu li a input {
              display: inline-block;

            }

这是使用子菜单 css 样式的 ul 列表：

                <ul class="sub-menu" id="assetNameMenu">
                   @* li elements created in script *@
                </ul>

Answer 1

浮点数可以很简单地做到这一点。

您只需在每次执行此操作后清除浮动 li

ul {
  list-style-type: none;
}
li {
  float: left;
  padding: 0 1em;
}
li:nth-child(3n+1) {
  clear: both;
}

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

inline-block 有一个类似的选项，详见 question by @phrogz

的答案

ul {
  list-style-type: none;
}
li {
  display: inline;
}
li:nth-child(3n)::after {
  content: "\A";
 white-space: pre;
  ;
}

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

Answer 2

作为替代方案，如果您不介意使用更新的 CSS，您也可以使用 flexbox：

ul {
  display:         flex;
  list-style-type: none;
  width:           300px;
  flex-wrap:       wrap;
}

li {
  flex: 33%;
}

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

如何在 li 元素的水平组中显示列表？

How to display a list in horizontal groups of li elements?

html

css

html-lists

display