web-dev-qa-db-ja.com

リストを2行で表示する方法は？

垂直方向に制約されているスペースに収めたいアイテムのリストがあります。

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
</ul>

リストに特定の高さを超えたくないのですが、水平方向に自由に広げることができるため、次のようにリストを列に分割します。

One    Two     Three
Four   Five    Six

または、代わりに（私の場合、順序は重要ではありません）

One    Three   Five
Two    Four    Six

Cssプロパティcolumn-countを使用すると、リストを列に分割できますが、列の固定数のみを受け入れます。持っているアイテムの数がわかりません（1から40を超えることができます）。したがって、列の数を3に設定すると、6を超えるアイテムのリストは高すぎます。アイテムが4つしかない場合、最初の列のみに2つのアイテムがあり、不均一に見えます。

したがって、理想的にはrow-countプロパティが必要ですが、存在しません。私はJavascriptでもそれを行うことができると思いますが、CSSのみのソリューションを探しています。

私は何かを試しました：float:leftごとにliがリストを1行に入れます。 2行に分割するには、N = 2要素にfloat:leftをnot適用する必要があります。どうすればいいのかわかりません。

また、それぞれが2つのulとfloat:leftを持つ複数のliに分割することでそれができることも知っていますが、何かのためにHTMLを台無しにしたくない完全にプレゼンテーション。

誰かがこの問題の解決策を持っていますか？

編集：自分の要件を明確に説明していないと思います。リストを列に並べ替えて、何個のアイテムを持っているかわからないようにし、で常に2行になるようにします。

たとえば、7つのアイテムがある場合、次のものが必要です。

One    Two     Three   Four
Five   Six     Seven

そして3つのアイテムで：

One    Two
Three
csscss3html-lists
20
Cyrille Ka

Jqueryを使用して簡単に実行できます。 CSSの方法が必要であることが言及されていることは知っていますが、これは将来、この質問を参照したい人のために参照するためのものです。

LIアイテムの数を取得し、それを行の数で割り、その値をcolumn-countプロパティに設定します。

Jquery

$(document).ready(function() {
var numitems =  $("#myList li").length;

$("ul#myList").css("column-count",Math.round(numitems/2));
});

[〜＃〜] css [〜＃〜]

ul {
  width: 900px;
}
li {
width: 75px;
height: 75px;
margin-top: 10px;
margin-right: 10px;
display: inline-block;
}

[〜＃〜] html [〜＃〜]

<ul id="myList">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>    
</ul>

ここで中段

編集：

シンプルなJavaScriptを使用した同じ実装。

var ul = document.getElementById("myList");
var li = ul.getElementsByTagName("li");
var numItems = li.length;

var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = "ul { column-count: " + Math.round(numItems/2) + "; }";
document.body.appendChild(css);

列数を設定した後でも行数は幅に依存するため、ULの幅を設定する必要があります。 100％に設定することもできますが、行サイズはウィンドウサイズに基づいて変わります。行数を2に制限するには、ULの固定幅が必要になる場合があります。

13
Poornima

Liを33％幅に設定し、互いに浮かせることができます。行に十分なスペースがなくなると、等幅の3行でプッシュダウンされます。

ul li{
  width: 33%;
  float: left;
}
7
user1620090

max-width？

ul {
  max-width: somevalue; // which would last when the third item ends
}

または、次のようにクラスを追加できます

<ul>
    <li class="one">One</li>
    <li class="one">Two</li>
    <li class="one">Three</li>
    <li class="two">Four</li>
    <li class="two">Five</li>
    <li class="two">Six</li>
</ul>

現在のCSS：

.one {
  display: inline;
}

.two {
  display: inline;
}

パディングの最後のことは

ul li {
  padding: somevalue;
}

スライスする場合：

ul {
  max-width: 200px; // to break the list
}

あなたの幸運は、リストの幅を最初にチェックできることです！そして、JSを使用して2つの等しい部分にスライスし、それを適用します。

CSS計算機を取得する場合は、これを使用します。

width: calc(var1 + var2); // calc will do the math..

この状況のフィドルは次のとおりです。 http://jsfiddle.net/afzaal_ahmad_zeeshan/xN87Q/

2
Afzaal Ahmad Zeeshan

使用できます

li:nth-child(even) 

li:nth-child(odd)

http://jsfiddle.net/nCmZT/

1
user3037493

ソース： 2列の順序なしリストの作成

フィドル： リンクで提供されるデモ

[〜＃〜] hmtl [〜＃〜]

<ul class="two-col-special">
    <li>First Category</li>
    <li>Second Category</li>
    <li>Third Category</li>
    <li>Fourth Category</li>
    <li>Fifth Category</li>
</ul>

[〜＃〜] css [〜＃〜]

.two-col-special {
    border: 1px dotted blue;
    overflow: auto;
    margin: 0;
    padding: 0;
}

.two-col-special li {
    display: inline-block;
    width: 45%;
    margin: 0;
    padding: 0;
    vertical-align: top; /* In case multi-Word categories form two lines */
}
.two-col-special li:before {
    content: '+';
    padding: 5px;
    margin-right: 5px; /* you can Tweak the gap */
    color: orange;
    background-color: white; /* in case you want a color... */
    display: inline-block;
}
1
Amarnath Balasubramanian

display: flexおよびflex-direction: rowを使用して、列から行への順序を変更する例を次に示します。

#list-1 {
  border: 3px solid red;
  columns: 2;
  column-gap: 5px;
  width: 200px;
}

#list-2 {
  border: 3px solid blue;
  columns: 2;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: auto; /* can change this */
  width: 200px;
}

#list-2 li {
  width: 100px;
  height: auto;
}
<ul id="list-1">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
</ul>

<ul id="list-2">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
</ul>
0
Ethan Ryan