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

Question

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

侧边栏目前的形式是：

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

其中每个 <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”小部件垂直。这会导致较大的间隙。

有没有办法缩小这些差距并给人一种带有两个独立列的侧边栏的错觉？或者有没有比我刚才描述的方法更好的方法来做事？

score 1 · Accepted Answer

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

像这样的东西：

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

1 回答 1