3

I have an unsorted list which I want do display in a tile-like style using CSS. This is my list:

<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>

This is the needed Output: Unfortunately I cannot post images here (due to my low reputation).

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

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


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

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

enter image description here

In a first step it would be enough if the list is only these 2 steps deep.

I checked several approaches using CSS, but failed. Can someone help me please with the solution or an approach?

Best regards, Stefan

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

您可以采取一些方法。一种是使用浮点数，如下所示：

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

另一个是显示：内联块。但请注意，您需要删除列表项之间的任何空格和换行符（在 HTML 中）：

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

注意 IE7 不做 inline-block。要使其在那里工作（如有必要），请添加：

.ie7 ul li li { 显示：内联；缩放：1；}

（我使用条件注释将 .ie7 类添加到 HTML 元素）

于 2013-11-11T09:52:12.173 回答
1

第一件事。你不能有一个<ul>直接在 parent 之下<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 回答