CSS：以类似于tile的样式显示未排序的列表

Question

我有一个未排序的列表，我希望使用CSS以类似于tile的样式显示。 这是我的清单：

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

如果列表只有这两个步骤，那么第一步就足够了。

我使用CSS检查了几种方法，但都失败了。 有人可以通过解决方案或方法帮助我吗？

祝你好运， 斯蒂芬

Answer 1

<强> - LIVE DEMO
的 - RESPONSIVE

更正了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;
}

Answer 2

您可以采取一些方法。一种是使用花车，如下：

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不执行内联块。为了使其在那里工作（如有必要），请添加：

.ie7 ul li li {         显示：内联;         zoom：1;    }

（我使用条件通知将.ie7类添加到HTML元素中）

Answer 3

第一件事。您不能直接在父<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/