1

順序付けられていないリストがあります：

<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のみを使用して変更する必要があることです。そのようなことは可能ですか？どうすればいいですか？

これが2つのリストです-元のスタイルと望ましいスタイル：http：//jsfiddle.net/MNYnW/2/

4

2 に答える 2

5

css3cloumn-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/

于 2012-04-18T10:17:20.353 に答える
0

クロスブラウザの完全に動的なソリューションが必要な場合は、以下の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);
});
于 2012-04-18T11:06:24.333 に答える