2

私は次のように表示される順不同のリストを取得しようとしています:

ここに画像の説明を入力

この調整はどのように達成できますか? 助けてくれてありがとう!

4

4 に答える 4

2

このタイプの機能では、column-countプロパティを使用できます。このように書いてください:

ul{
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
}

詳細については、リストアイテムを2列以上で表示したい(動的配置)

注:IEでは機能しません。

IEの場合、次のJavaScriptを使用できます。CSS3-複数列のレイアウトのデモンストレーション

于 2012-09-03T08:11:29.857 に答える
0

私はこれがあなたのために働くことを願っています:-http://tinkerbin.com/BAzYZaPY

column-widthあなたは財産を通してあなたが望む結果を得ることができます

このcolumn-widthプロパティはOperaでのみサポートされています。

Firefoxは代替手段であるをサポートしてい-moz-column-width propertyます。

SafariとChromeは、代替の、をサポートしてい-webkit-column-width propertyます。

于 2012-09-03T08:15:21.117 に答える
0

またはあなたは試すことができます

<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;
}
于 2012-09-03T08:16:13.200 に答える
0

このスタイルを試すことができます (以下)。列の数は、要素の数と利用可能な幅に応じて動的に変化します。

<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;
}
于 2012-09-03T08:26:57.133 に答える