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

Question

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

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

我所做的尝试是将菜单使用的样式 .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，有一个类似的选项，如@phrogz 对question 的回答中所述

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>