277

次の HTML で、リストを 2 列で表示する最も簡単な方法は何ですか?

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
</ul>

希望の表示:

A B
C D
E

このソリューションは、Internet Explorer で動作する必要があります。

4

18 に答える 18

478

最新のブラウザ

css3 列モジュールを活用して、探しているものをサポートしてください。

http://www.w3schools.com/cssref/css3_pr_columns.asp

CSS:

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

http://jsfiddle.net/HP85j/8/

レガシー ブラウザ

残念ながら、IE をサポートするには、JavaScript と dom 操作を含むコード ソリューションが必要です。これは、リストの内容が変更されるたびに、リストを列に並べ替えて再印刷する操作を実行する必要があることを意味します。以下のソリューションでは、簡潔にするために jQuery を使用しています。

http://jsfiddle.net/HP85j/19/

HTML:

<div>
    <ul class="columns" data-columns="2">
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
        <li>E</li>
        <li>F</li>
        <li>G</li>
    </ul>
</div>

JavaScript:

(function($){
    var initialContainer = $('.columns'),
        columnItems = $('.columns li'),
        columns = null,
        column = 1; // account for initial column
    function updateColumns(){
        column = 0;
        columnItems.each(function(idx, el){
            if (idx !== 0 && idx > (columnItems.length / columns.length) + (column * idx)){
                column += 1;
            }
            $(columns.get(column)).append(el);
        });
    }
    function setupColumns(){
        columnItems.detach();
        while (column++ < initialContainer.data('columns')){
            initialContainer.clone().insertBefore(initialContainer);
            column++;
        }
        columns = $('.columns');
    }

    $(function(){
        setupColumns();
        updateColumns();
    });
})(jQuery);

CSS:

.columns{
    float: left;
    position: relative;
    margin-right: 20px;
}

編集：

以下で指摘されているように、これは次のように列を並べ替えます。

A  E
B  F
C  G
D

OPは以下に一致するバリアントを要求しました：

A  B
C  D
E  F
G

バリアントを実現するには、コードを次のように変更するだけです。

function updateColumns(){
    column = 0;
    columnItems.each(function(idx, el){
        if (column > columns.length){
            column = 0;
        }
        $(columns.get(column)).append(el);
        column += 1;
    });
}
于 2013-02-07T06:59:47.140 に答える
90

私は@jaiderの解決策を見ていましたが、私は少し異なるアプローチを提供しています.

ul{
    list-style-type: disc;
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
    list-style-position: inside;//this is important addition
}

デフォルトでは、順序付けられていないリストは箇条書きの位置を外側に表示しますが、一部のブラウザーでは、ブラウザーの Web サイトのレイアウト方法に基づいて表示上の問題が発生する場合があります。

形式で表示するには、次のようにします。

A B
C D
E

以下を使用します。

ul li{
    float: left;
    width: 50%;//helps to determine number of columns, for instance 33.3% displays 3 columns
}
ul{
    list-style-type: disc;
}

これにより、列の表示に関するすべての問題が解決されます。あなたの応答がこれを発見するのに役立ったので、@jaiderに感謝します。

于 2014-07-24T03:30:06.843 に答える
46

これをコメントとして投稿しようとしましたが、列を正しく表示できませんでした (質問のとおり)。

あなたが求めているもの:

AB

CD

え

...しかし、解決策として受け入れられた答えは次のように返されます。

広告

なれ

ハ

...つまり、答えが間違っているか、質問が間違っています。

非常に簡単な解決策は、アイテム<ul>の幅を設定してから、フロートして<li>アイテムの幅を次のように設定することです

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
</ul>

ul{
    width:210px;
}
li{
    background:green;
    float:left;
    height:100px;
    margin:0 10px 10px 0;
    width:100px;
}
li:nth-child(even){
    margin-right:0;
}

ここの例http://jsfiddle.net/Jayx/Qbz9S/1/

あなたの質問が間違っている場合は、以前の回答が適用されます (IE サポートがないための JS 修正付き)。

于 2013-02-07T09:58:20.490 に答える
19

最新のブラウザー向けのソリューションは気に入っていますが、箇条書きが欠けているため、ちょっとしたトリックを追加します。

http://jsfiddle.net/HP85j/419/

ul {
    list-style-type: none;
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}


li:before {
  content: "• ";
}

ここに画像の説明を入力

于 2014-06-12T15:44:40.747 に答える
7

これが最も簡単な方法です。CSSのみ。

  1. ul 要素に幅を追加します。
  2. display:inline-block と新しい列の幅を追加します (ul 幅の半分未満にする必要があります)。
ul.list {
  width: 300px;  
}

ul.list li{
  display:inline-block;
  width: 100px;
}
<ul class="list">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
</ul>
于 2016-05-11T10:36:55.043 に答える
4

これは、親divのcolumn-countcssプロパティを使用して実現できます。

お気に入り

 column-count:2;

詳細については、こちらをご覧ください。

フローティングDIVリストを行ではなく列に表示する方法

于 2013-02-07T06:54:17.190 に答える
-1

これは私にとって完璧な解決策であり、何年も探していました：

http://css-tricks.com/forums/topic/two-column-unordered-list/

于 2014-05-23T08:29:02.193 に答える