0

所以我有两个不同的 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;
}

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

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

提前致谢！

PS我不能用clear:both，因为它们浮动到左边的另一个大图

4

2 回答 2

1

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

看小提琴

您还在这里制作了一些不必要ul的li结构，这给了您一些无聊的利润。尝试精简列表并仅使用必要的内容。

希望这可以帮助！

于 2013-05-23T14:31:40.877 回答
0

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

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

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

于 2013-05-23T14:35:17.243 回答