4

次のようなhtmlリストがあるとしましょう。

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    ...
    <li>10</li>
</ul>

cssやjavaスクリプトを使用して、ブラウザに次のように表示させる方法（4つのグループで、グループ間にある程度の余裕を持たせて）：

1 2    5 6    9 10
3 4    7 8
4

5 に答える 5

6

を使用するだけで、ルールを適用できる親要素でをラップした後、次column-countのようになります。floatwidthulcolumn-count

.colWrap {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    -o-column-count: 3;
    -ms-column-count: 3;
    column-count: 3;
}
li {
    float: left;
    width: 50%;
}​

調整されたHTML：

<div class="colWrap">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
</div>​

JSフィドルデモ。

参照：

于 2012-04-25T10:41:23.050 に答える
4

column-countこれにはcss3プロパティを使用できます。

このように書いてください：

.colWrap {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    -o-column-count: 3;
    -ms-column-count: 3;
    column-count: 3;
    -webkit-column-width:20px;
    -moz-column-width:20px;
}
li {
    display:inline;
}
div{
    width:120px;
}

これをチェックしてくださいhttp://jsfiddle.net/rJTGJ/2/

于 2012-04-25T10:44:11.660 に答える
0

「ul」をニーズに合ったテーブルに置き換えることで試すことができます。 デモを見る

このデモは、cssまたはさまざまなhtmlタグを使用して必要に応じてカスタマイズするだけです。

JavaScript

$(function(){
    $("ul").each(function(){
        var oh = "<table><tr>";
        for(i=0;i<this.children.length;i++){
            oh += "<td>"+this.children[i].innerHTML+"</td>";
            if(i%2==1){
                oh+="</tr>";
                if(i%4==3){
                    oh+="</table><table><tr>";
                } else {
                    oh+="<tr>";
                }
            }
        }
        oh += "</tr></table>";
        this.outerHTML = oh;
    });
});

編集

CSSのcolumn-countの可能性もありますが、これはすべてのブラウザーで機能するわけではありません。WhenCanIuseを参照してください。したがって、私のものはフォールバックバージョンであり、はるかに多くのブラウザで動作するはずです。

于 2012-04-25T10:52:19.380 に答える
0

ここでjQueryを使用する別の方法..（ライブデモ）

var ul = $('ul'),
    lis = $('ul li');

lis.each(function (index) {
  if(index % 4 === 0) {
    ul.append($('<ul />'));
  }
  ul.find('ul').eq(~~(index / 4)).append($(this));
});

そしてCSS

ul ul {
  float: left;
  width: 50px;
  margin-right: 30px;
}
ul li {
  list-style-type: none;
  float: left;
  width: 50%;
}
于 2012-04-25T11:27:22.943 に答える
-1

HTMLテーブルを使用する

<table>
 <tr>
  <td></td>
 </tr>
</table>

そして、テーブルの境界線の特性を変更して非表示にします。お役に立てれば。

于 2012-04-25T10:36:25.703 に答える