私は次のように表示される順不同のリストを取得しようとしています:
この調整はどのように達成できますか? 助けてくれてありがとう!
このタイプの機能では、column-countプロパティを使用できます。このように書いてください:
ul{
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
詳細については、リストアイテムを2列以上で表示したい(動的配置)
注:IEでは機能しません。
IEの場合、次のJavaScriptを使用できます。CSS3-複数列のレイアウトのデモンストレーション
私はこれがあなたのために働くことを願っています:-http://tinkerbin.com/BAzYZaPY
column-width
あなたは財産を通してあなたが望む結果を得ることができます
このcolumn-width
プロパティはOperaでのみサポートされています。
Firefoxは代替手段であるをサポートしてい-moz-column-width property
ます。
SafariとChromeは、代替の、をサポートしてい-webkit-column-width property
ます。
またはあなたは試すことができます
<ul>
<li>cont</li>
<li>cont</li>
<li>cont</li>
</ul>
<ul>
<li>cont</li>
<li>cont</li>
<li>cont</li>
</ul>
<ul>
<li>cont</li>
<li>cont</li>
<li>cont</li>
</ul>
ul
{
float:left;
}
このスタイルを試すことができます (以下)。列の数は、要素の数と利用可能な幅に応じて動的に変化します。
<style>
ul > li
{
list-style-type: none;
display: block;
float: left;
width: 120px;
}
</style>
<ul>
<li>Barn</li>
<li>Data</li>
<li>Design</li>
<li>Lov og rett</li>
<li>Matt</li>
<li>Musikk</li>
<li>Barn</li>
<li>Data</li>
<li>Design</li>
<li>Lov og rett</li>
<li>Matt</li>
<li>Musikk</li>
<li>Barn</li>
<li>Data</li>
<li>Design</li>
<li>Lov og rett</li>
<li>Matt</li>
<li>Musikk</li>
</ul>
列の固定数を ul 要素の幅に設定する場合 (列数にリスト要素の幅を掛けます。たとえば、この場合は 5 列の幅を 600px に設定します):
ul {
width: 600px;
}