Question

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

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

我尝试的是将菜单使用的样式.sub-menu li设置为display: inline as suggested here以显示内联的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

之后清除浮动

＆＃13;

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

＆＃13;

<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>

＆＃13;

对于inline-block，question

对此@phrogz的答案中详细说明了类似的选项

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

作为替代方案，如果您不介意使用较新的CSS，也可以使用flexbox执行此操作：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

2 个答案: