css - 两行中的位置列表项

Question

我正在尝试按照以下结构获取我的列表

 -- 48           -- l
 -- 50           -- xl
 -- 52

但是它在我的网站上是这样显示的

 -- 48           -- 50
 -- 52           -- l
 -- xl

这是一个Jsfiddle为了更清楚，任何人都可以弄清楚我做错了什么吗？

编辑
以下是根据要求生成列表的方式

<?php foreach ($this->getItems() as $_item): ?>
    <?php if($_item->getName() == "Maat" || $_item->getName() == "maat"): ?>
        <li <?php if(is_numeric($_item->getLabel())):?> class="number"<?php else:?>class="no-number"<?php endif; ?> >
    <?php else: ?>
        <li>
    <?php  endif; ?>
    <?php if ($_item->getCount() > 0): ?>
        <?php $id= $_item->getValue();?>
        <?php $category = Mage::getModel('catalog/category')->load($id) ?>

        <?php if($_item->getName() == "Categorie"): ?>
          <div class="checkdiv" id="checkdiv<?php echo $_item->getValue() ?>" onclick="setLocation('<?php echo $this->urlEscape($category->getUrl()) ?>')">
            <input type="checkbox" id="<?php echo $_item->getValue() ?>">
        </div>
        <?php else: ?>
        <div class="checkdiv" id="checkdiv<?php echo $_item->getValue() ?>" onclick="setLocation('<?php echo $this->urlEscape($_item->getUrl()) ?>')">
            <input type="checkbox" id="<?php echo $_item->getValue() ?>">
        </div>
        <?php endif;?>
        <span class="labelholder">
            <?php if($_item->getName() == "Kleur"): ?>
                <?php 
                    $kleur = strtolower($_item->getLabel()); 
                    $kleur = str_replace('-', '', $kleur);
                    $kleur = str_replace(' ', '', $kleur);
                ?>
            <img src="<?php echo $this->getSkinUrl('images/kleuren/'.$kleur.'.png') ?>" id="kleur_img" />
            <?php endif;?>
            <label for="<?php echo $_item->getValue() ?>"><?php echo $_item->getLabel() ?></label>
                <?php if ($this->shouldDisplayProductCount()): ?>
                <span class="count"><?php echo $_item->getCount() ?></span>
        </span>
        <?php endif; ?>
    <?php else: ?>
        <span>
            <?php echo $_item->getLabel(); ?>
            <?php if ($this->shouldDisplayProductCount()): ?>
                <span class="count"><?php echo $_item->getCount() ?></span>
            <?php endif; ?>
        </span>
    <?php endif; ?>
</li>
<?php endforeach ?>

在此代码片段中，所有 Magento Store 属性都被获取并显示在分层导航的前端

Answer 1

修复(破解): http://jsfiddle.net/vimxts/xdo4owk0/1/

请查看下面的新答案

<罢工>

<罢工>

.wrapper {
    height:300px;
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}

添加自定义高度的包装器(限制元素如何放置)然后手动指定列号。

还在 <li> 上显示方 block

这是一个片段:

.wrapper {
    height:300px;
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}

li{list-style:none;display:block;}
li {
margin-bottom: 10px;
margin-left: 20px;
}
.checkdiv {
display: block;
width: 12px;
height: 12px;
float: left;
background-color: #FFF;
border: 1px solid #b5b5b5;
border-radius: 3px;
}
.checkdiv input {
display: none;
}

.labelholder {
margin: 10px;
color: #4c4c4c;
}

label {
display: inline-block;
font-size: 13px;
font-family: "Raleway", "Helvetica Neue", Verdana, Arial, sans-serif;
font-weight: 600;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
}

.number {
width: 40%;
float: left;
}

.no-number {
float: left;
width: 40%;
clear: right;
}

<div class="wrapper">
<li class="number">
    <div class="checkdiv" id="checkdiv61">
        <input type="checkbox" id="61"/>
    </div> 
    <span class="labelholder">
        <label for="61">48</label>
        <span class="count">2</span>
    </span>
</li>

<li class="number">
    <div class="checkdiv" id="checkdiv60">
        <input type="checkbox" id="60"/>
    </div> 
    <span class="labelholder">
        <label for="60">50</label>
        <span class="count">2</span>
    </span>
</li>

<li class="no-number">
    <div class="checkdiv" id="checkdiv59">
        <input type="checkbox" id="59"/>
    </div> 
    <span class="labelholder">
        <label for="59">52</label>
        <span class="count">3</span>
    </span>
</li>

<li class="number">
    <div class="checkdiv" id="checkdiv58">
        <input type="checkbox" id="58"/>
    </div> 
    <span class="labelholder">
        <label for="58">xl</label>
        <span class="count">2</span>
    </span>
</li>

<li class="no-number">
    <div class="checkdiv" id="checkdiv57">
        <input type="checkbox" id="57"/>
    </div> 
    <span class="labelholder">
        <label for="57">l</label>
        <span class="count">2</span>
    </span>
</li>
</div>

<罢工>