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

Question

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

我想要做的是对列表中的每一行进行分组,以在ul菜单中显示3个li元素而不是每行一个元素.

我所做的尝试是将.sub-menu li菜单使用的样式设置display: inline 为此处建议的内容,以显示li元素内联,但这对水平排序没有任何影响.

所以不是这样的:

• 吉姆
• 简
• 插口
• 琼斯
• 杰克逊
• 的Jhonny

它将显示如下(其中列表中的每个三个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

Floats可以非常简单地完成这项工作.

你可以在每一次之后清除漂浮物 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对这个问题的回答

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>