重新构建wordpress侧边栏以并排放置备用小部件

Question

我正在调整Wordpress网站以使主题响应。这包括侧边栏的备用显示模式，具体取决于用户查看页面的情况。

侧栏目前的格式为：

<div id="sidebar">
    <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
        ....
    </ul>
</div>

其中每个＆lt; li>是一个侧边栏小部件。通常，侧边栏小部件在垂直列中显示一个在另一个之下，如下所示：

A
B
C
D
E
F

我正在尝试做的是，使用CSS，使交替的侧边栏小部件并排放在两列中，如下所示：

A B
C D
E F

到目前为止，我能够让他们适当地使用以下风格排列......

#sidebar ul > li:nth-child(2n+1) {
    float: right;
}

...几乎。问题是，最终位于结果侧边栏中“B”和“D”位置的小部件非常短（一个是搜索框，另一个是注册表单），但是它们排列在一起的顶部对齐无论如何，垂直地使用'A'和'C'小部件。这会导致很大的差距。

有没有办法弥补这些差距并给出侧栏有两个独立列的错觉？或者，除了我刚才描述的方法之外，还有更好的方法吗？

Answer 1

也许如果你将LI元素浮动到左边，然后你清除每个第n个孩子的浮动（在这种情况下每个奇怪的孩子）？

这样的事情：

#sidebar li {
    float: left;
}
#sidebar li:nth-child(odd) {
    clear:both;
}