javascript - <ul> <li> 定位

Question

我正在创建一个图片库，其中每张幻灯片有 9 个列表项，但只有 1 个无序列表。我这样做的原因是可以轻松地将内容添加到 CMS 中，而不是每次他们希望添加画廊时都必须添加新的无序列表。

设置代码的方式是:

<div class="gallery">
<span class="prv_button"><a href=""></a></span>
<div class="gallery_wrap">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<span class="nxt_button"><a href=""></a></span>
</div>
</div>

目前无序列表没有宽度，因为它需要能够滚动到下一组列表项，但目前显示的是彼此相邻的内联列表。但是我想在 3 个中显示在另一个下面。我曾尝试在无序列表上设置高度，但这并没有因为无序列表的宽度而有所不同。

如果您需要更多信息，请告诉我。

谢谢，

乔希

Answer 1

我解决这个问题的第一个想法是 CSS 选择器，例如:

/* quick & dirty */
ul li:nth-child(3n):after {
    content: '<br />';
}

或

ul li {
    float: left;
}

ul li:nth-child(3n+1) {
    display: block !important;
}

这应该将第 1、4、7、... 列表项(即图片)放在最左边，并连续显示三张图片。

您也可以尝试设置固定宽度，以便元素必须服从:

ul {
    width: 650px;
}

ul li {
    float: left;
    margin: 0 5px 5px 0;
    width: 150px;
}

当代码有什么奇怪的地方或者我误解了你的问题时请告诉我，我会尝试相应地修复它。