Question

所以我有两个不同的ul列表：

<div class="features">
    <ul>
        <li>
            <ul>
                <li>quantity</li>
                <li>
                    <select>
                        <option value="1">1</option>
                        <option value="2">2</option>
                    </select>
                </li>
            </ul>
        </li>
        <li>
            <ul>
                <li>size</li>
                <li>
                    <select>
                        <option value="46">46</option>
                        <option value="48">48</option>
                    </select>
                </li>
            </ul>
        </li>
        <li>
            <ul>
                <li>color</li>
                <li>
                    <img src="img/color-white.jpg">
                    <img src="img/color-black.jpg">
                </li>
            </ul>
        </li>
        <li><form><button class="add-button">Add to shopping list</button></form></li>
    </ul>
</div>
<div class="social">
    <ul>
        <li>twitter</li>
        <li>facebook</li>
        <li>vkontakte</li>
    </ul>
</div>

我使用这种风格：

.features ul ul > li {
    display: inline-block;
    width: 125px;
    padding-bottom: 5px;
    vertical-align: middle;
}
.social {
    display: block;
}

我希望这两个列表在另一个列表之下，但无论我如何尝试，它们总是在左边一个，另一个在右边。

请帮我两个强迫他们进入正确的位置

提前致谢！

P.S。我不能使用clear：both，因为它们浮动到左边的另一个大图像

Answer 1

如果您希望这些项目自动显示在下一行，您只需从display:inline-block类中删除 .features，它们就会开始堆叠在一起。

请参阅fiddle

您还在这里制作了一些不必要的ul和li结构，这些结构可以为您提供一些不必要的边距。尝试减少列表并仅使用必要的内容。

希望这有帮助！

Answer 2

在没有示例或完整CSS的情况下回答这个问题就像在黑暗中拍摄一样。

你说你的ul浮动在一张大图片的右边，所以我假设你有类似ul { float: right; }的东西，在这种情况下，它们只是按照预期的那样漂浮在彼此旁边。

如果是这种情况，那么您可以通过将clear: right;添加到.social（或任何第二个ul）来轻松解决问题。

ul li显示块问题

2 个答案: