3

CSS を使用してタイルのようなスタイルで表示したいソートされていないリストがあります。これは私のリストです：

<ul>
  <li>Area 1</li>
  <ul>
    <li><a href="#">Topic 1</a></li>
    <li><a href="#">Topic 2</a></li>
    <li><a href="#">Topic 3</a></li>
    <li><a href="#">Topic 4</a></li>
  </ul>
  <li>Area 2</li>
  <ul>
    <li><a href="#">Topic 5</a></li>
    <li><a href="#">Topic 6</a></li>
  </ul>
</ul>

これは必要な出力です: 残念ながら、ここに画像を投稿することはできません (評判が悪いため)。

+---------------------------+
|            Area 1         |
+---------------------------+

+-------+ +-------+ +-------+
|Topic 1| |Topic 2| |Topic 3|
+-------+ +-------+ +-------+
+-------+ 
|Topic 4| 
+-------+ 


+---------------------------+
|            Area 2         |
+---------------------------+

+-------+ +-------+
|Topic 5| |Topic 6|
+-------+ +-------+

ここに画像の説明を入力

最初のステップでは、リストがこの 2 ステップの深さだけあれば十分です。

CSS を使用していくつかのアプローチを確認しましたが、失敗しました。誰かが解決策やアプローチを手伝ってくれますか?

よろしく、ステファン

4

3 に答える 3

3

- ライブデモ
- レスポンシブ

ここに画像の説明を入力

修正された HTML:

<ul>

  <li><span>Area 1</span>
    <ul>
      <li><a href="#">Topic 1</a></li>
      <li><a href="#">Topic 2</a></li>
      <li><a href="#">Topic 3</a></li>
      <li><a href="#">Topic 4</a></li>
    </ul>
  </li>

  <li><span>Area 2</span>
    <ul>
      <li><a href="#">Topic 5</a></li>
      <li><a href="#">Topic 6</a></li>
    </ul>
  </li>

</ul>

CSS:

ul{
  width:300px;
  list-style:none;
  padding:0;
  text-align:center;
  overflow:auto;
}
ul > li{
  margin-bottom:15px;
}
li span{
  display:block;
  clear:both;
  background:#5A9BD5;
  padding:15px 0;
}
ul ul li{
  float:left;
  width:90px;
  margin:15px 15px 0 0;
}
ul ul li:nth-child(3){
  margin-right:0;
}
ul li a{
  background:#5A9BD5;
  display:block;
  width:100%;
  padding:15px 0;
}
于 2013-11-11T10:08:54.930 に答える
1

あなたが取ることができるいくつかのアプローチがあります。1 つは、次のようにフロートを使用することです。

ul li {
    clear: left;
}
ul li ul li { 
    clear: none;
    float: left; 
    width: 33.33%; 
}

もう 1 つは、display: inline-block です。ただし、(HTML 内の) リスト項目の間から空白と改行を削除する必要があることに注意してください。

ul li li { 
    display: inline-block;
    width: 33.33%; 
}

注 IE7 はインライン ブロックを行いません。そこで動作させるには（必要に応じて）これを追加します：

.ie7 ul li li { 表示: インライン; ズーム: 1; }

(条件付きコメントを使用して、.ie7 クラスを HTML 要素に追加します)

于 2013-11-11T09:52:12.173 に答える
1

初めにすること。<ul>親の直下に を配置することはできません<ul>。

<ul>
  <li>Area 1</li>
  <!-- this is wrong -->
  <ul>
    <li><a href="#">Topic 1</a></li>
    <li><a href="#">Topic 2</a></li>
    <li><a href="#">Topic 3</a></li>
    <li><a href="#">Topic 4</a></li>
  </ul>
  <li>Area 2</li>
  <!-- this is wrong -->
  <ul>
    <li><a href="#">Topic 5</a></li>
    <li><a href="#">Topic 6</a></li>
  </ul>
</ul>

したがって、この方法でマークアップを変更できます。

<ul>
  <li>Area 1</li>
  <li class="tiles">
    <ul>
      <li><a href="#">Topic 1</a></li>
      <li><a href="#">Topic 2</a></li>
      <li><a href="#">Topic 3</a></li>
      <li><a href="#">Topic 4</a></li>
    </ul>
  </li>
  <li>Area 2</li>
  <li class="tiles">
    <ul>
      <li><a href="#">Topic 5</a></li>
      <li><a href="#">Topic 6</a></li>
    </ul>
  </li>
</ul>

今CSS：

ul, li {display: block; list-style: none; margin: 0; padding: 0;}
ul {background: #fff;}
li {line-height: 50px; width: 100%; text-align: center; background: #66f; margin: 5px;}
li.tiles ul li {width: 33%; float: left; margin: 5px 0; background: none;}
li.tiles ul {overflow: hidden;}
li.tiles {text-align: left; margin: 0;}
a {color: #fff; text-decoration: none; display: block; background: #66f; margin: 5px;}

フィドル: http://jsfiddle.net/praveenscience/LjCHW/1/

class属性を使用しない場合。

HTML

<ul>
  <li>Area 1</li>
  <li>
    <ul>
      <li><a href="#">Topic 1</a></li>
      <li><a href="#">Topic 2</a></li>
      <li><a href="#">Topic 3</a></li>
      <li><a href="#">Topic 4</a></li>
    </ul>
  </li>
  <li>Area 2</li>
  <li>
    <ul>
      <li><a href="#">Topic 5</a></li>
      <li><a href="#">Topic 6</a></li>
    </ul>
  </li>
</ul>

CSS

ul, li {display: block; list-style: none; margin: 0; padding: 0;}
ul {background: #fff;}
li {line-height: 50px; width: 100%; text-align: center; background: #66f; margin: 5px;}
li ul li {width: 33%; float: left; margin: 5px 0; background: none;}
li ul {overflow: hidden;}
a {color: #fff; text-decoration: none; display: block; background: #66f; margin: 5px;}

フィドル: http://jsfiddle.net/praveenscience/LjCHW/2/

于 2013-11-11T09:52:40.720 に答える