左右浮动多个li

Question

我想在wordpress中制作自定义侧边栏,我拥有li中的所有元素和信息,我想要做的是尝试将总li的一半移到左边,一半移到右边...

我正在使用的是左/右浮动/清除,这似乎不像我想要的那样工作......

HTML结构: -

<ul>
    <li class="left">Left</li>
    <li class="left">Left</li>
    <li class="left">Left</li>
    <li class="left">Left</li>
    <li class="left">Left</li>
    <li class="right">Right</li>
    <li class="right">Right</li>
    <li class="right">Right</li>
    <li class="right">Right</li>
    <li class="right">Right</li>
</ul>

CSS: -

.left { float:left; width:50%; clear:left; }
.right { float:right; width:50%; clear:right }

的jsfiddle

Answer 1

如果您愿意放弃列表样式光盘(取决于浏览器),您可以轻松地执行此操作而无需浮动或修改标记.

http://jsfiddle.net/Duejc/2/

ul {
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
}

Answer 2

你为什么不这样刹车呢,视情况而定:)

<ul class="left">
    <li>Left</li>
    <li>Left</li>
    <li>Left</li>
    <li>Left</li>
    <li>Left</li>
</ul>

<ul class="right">

    <li>Right</li>
    <li>Right</li>
    <li>Right</li>
    <li>Right</li>
    <li>Right</li>
</ul>

.left{
float: left;
width: 50%; }

.right{
float: right;
width: 50%; }

或者像@Xander说:)

Answer 3

洗牌你是HTML.当一个元素被clear编辑时,它对先前浮动的元素这样做; 在你的情况下,它是清除第五个元素的第六个元素:

<ul>
    <li class="left">Left</li>
    <li class="right">Right</li>
    <li class="left">Left</li>
    <li class="right">Right</li>
    <li class="left">Left</li>
    <li class="right">Right</li>
    <li class="left">Left</li>
    <li class="right">Right</li>
    <li class="left">Left</li>
    <li class="right">Right</li>
</ul>

的jsfiddle