Question

我有一个无序列表：

<ul>
    <li class="title">title1</li>
    <li>elem1</li>
    <li>elem2</li>
    <li>elem3</li>
    <li class="title">title2</li>
    <li>elem1</li>
    <li>elem2</li>
    <li>elem3</li>
</ul>

我想显示此列表，其中标题将位于列表顶部。像是结果：

<ul style="float:left;">
    <li>title1</li>
    <li>elem1</li>
    <li>elem2</li>
    <li>elem3</li>
</ul>
<ul style="float:left;">
    <li>title2</li>
    <li>elem1</li>
    <li>elem2</li>
    <li>elem3</li>
</ul>

问题是我无法更改原始html，我只能使用css。这样的事可能吗？我该怎么办？

以下是两个列表 - 原始样式和所需样式：http://jsfiddle.net/MNYnW/2/

Answer 1

您可以使用css3 cloumn-count属性来实现。写得像这样：

<强> CSS

.list {
    -moz-column-count: 2;
    -moz-column-gap: 5px;
    -webkit-column-count: 2;
    -webkit-column-gap: 5px;
    column-count: 3;
    column-gap: 5px;
    width: 100px;
}

<强> HTML

<ul class="list">
    <li>title1</li>
    <li>elem1</li>
    <li>elem2</li>
    <li>elem3</li>
    <li>title2</li>
    <li>elem1</li>
    <li>elem2</li>
    <li>elem3</li>
</ul>

选中此http://jsfiddle.net/MNYnW/16/

Answer 2

如果你需要跨浏览器的全动态解决方案，你可以通过下面的jQuery来实现：

$(function() {

    var previousList = $('#list').html().split(/title[0-9]+/);  
    var newList = '';   
    var i = 1;

    $('#list > li').each(function() {
        var self = $(this);
        var title = /title[0-9]+/.test(self.text());

        if(!(self.index() == 0)) {
            if(title) {
                newList += '</ul><ul style="float: left;"><li>' + self.html() + previousList[i].substring(0, previousList[i].length - 4);
                i++;
            }
        }

        else {
            if(title) {
                 newList += '<ul style="float: left;"><li>' + self.html() + previousList[i].substring(0, previousList[i].length - 4);
                 i++;           
            }
        }        

    }); 

    newList += '</ul>';

    $('body').html(newList);
});

模仿单个列表中的两个列表

2 个答案: