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中显示在另一个之下。我已经尝试在unoreder列表上设置一个高度，但由于无序列表的宽度，这没有区别。

如果您需要更多信息，请与我们联系。

谢谢，

约什

Answer 1

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

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

OR

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

如果代码有些奇怪或者如果我误解了您的问题，请告诉我，我会尝试相应地修复它。

Answer 2

请试试这个 .prv_button,.nxt_button,.gallery_wrap ul{floal:left;} .gallery_wrap ul li{float:left;} .gallery_wrap ul{width: ulWidth; height:ulWidth; overflow:hidden;}

<ul> <li>定位</li> </ul>

2 个答案: