CSS：以类似平铺的样式显示未排序的列表

我有一个未排序的列表，我想使用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>

在第一步中，如果列表只有这两步那么深就足够了

我使用CSS检查了几种方法，但失败了。 有人能帮我找到解决方案或方法吗

致以最良好的祝愿，

---

Stefan

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

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

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

注IE7不做内联块。要使其在那里工作（如有必要），请添加以下内容：

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

---

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

第一件事。您不能将

直接放在父级

下

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

小提琴：

---

不使用

类

属性

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>

小提琴：

更正的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”稍微偏向了我的观点，但这看起来相对容易（适当地使用

width

和

display

，或

float

）。你的尝试在哪里失败了？你能告诉我们你的尝试吗？谢谢你的回答-代码按我的需要工作。我进一步的问题是，您使用一个类。我以固定的形式收到未排序的列表-错误的

-结构可以在那里修复，但不幸的是不是class属性。是否可以在没有任何类定义的情况下使用css sniplet？有趣的是：html代码来自微软的标准菜单控件-到目前为止，微软和标准：）@StefanMeyer谢谢。如果对您有效，请接受答案。：）@StefanMeyer是的，有可能。我将在不使用课堂的情况下更新答案。给我一点时间。@StefanMeyer未使用类进行更新。这是我进一步调查的完美基础！谢谢你，Praveen，这很有效。

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

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

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

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