Html 显示/浮动，设置列表样式

我正在将一个html表重做为一个列表。 现在看起来是这样的：

<ul>

<li>Some fruits
<ul>
  <li>2013
    <ul>
      <li>Apple</li>
        <li>Kiwi</li>
    </ul>
  </li>
</ul>
</li>

<li>Some other fruits
<ul>
  <li>2012
    <ul>
      <li>Banana</li>
    </ul>
  </li>
  <li>2011
    <ul>
      <li>Lemon</li>
        <li>Orange</li>
        <li>Plum</li>
    </ul>
  </li>
  <li>2009
    <ul>
      <li>Peach</li>
      <li>Pear</li>
    </ul>
  </li>

</ul>
</li>
</ul>

嵌套的元素让我头疼，我被卡住了。我有一种感觉，这将涉及到元素的显示类型和一些浮动。有什么想法吗？在这里拉小提琴：

---

谢谢。

如果我理解正确的话，这里有同样的小提琴，根据你要完成的任务进行了修改：

为了使CSS更具可读性，我添加了一些类，并将每个部分的“subtitle”包装在一个div中，以便对它们应用floating

我还删除了颜色，因为我解释说它们只是为了可视化元素而添加的

CSS

h4 {
    margin: 0px;
    padding: 0px;
    float:left;
}
ul {
    list-style: none outside none;
    padding: 0;
}
ul li ul li ul {
    float:left;
    margin-left: 10px;
}
ul li {
    clear:both;
}

HTML

<ul>
    <li>Some fruits
        <ul>
            <li>
                <h4>2013</h4>
                <ul>
                    <li>Apple</li>
                    <li>Kiwi</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>Some other fruits
        <ul>
            <li>
                <h4>2012</h4>
                <ul>
                    <li>Banana</li>
                </ul>
            </li>
            <li>
                <h4>2011</h4>
                <ul>
                    <li>Lemon</li>
                    <li>Orange</li>
                    <li>Plum</li>
                </ul>
            </li>
            <li>
                <h4>2009</h4>
                <ul>
                    <li>Peach</li>
                    <li>Pear</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

一些水果


2013

苹果
猕猴桃




其他一些水果


2012

香蕉



2011

柠檬
橙色的
李子



2009

桃子
梨

转换列表是否有特殊原因？这看起来像是表格数据。我想它更容易更新，而且看起来更干净。为了便于布局，到处都是空的s。使用标题元素（h1等）而不是div来标记年份似乎更合适。谢谢，这很有效。但是，如果不添加div和类，是否可以使用类似于

ul li ul li

等的内容获得相同的结果？@jimmy您可以将

ul.subitems

替换为

ul li ul

，但是为了将年份放在子项的左侧，您需要一个元素来包含文本，以指示其浮动。

<ul>
    <li>Some fruits
        <ul>
            <li>
                <h4>2013</h4>
                <ul>
                    <li>Apple</li>
                    <li>Kiwi</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>Some other fruits
        <ul>
            <li>
                <h4>2012</h4>
                <ul>
                    <li>Banana</li>
                </ul>
            </li>
            <li>
                <h4>2011</h4>
                <ul>
                    <li>Lemon</li>
                    <li>Orange</li>
                    <li>Plum</li>
                </ul>
            </li>
            <li>
                <h4>2009</h4>
                <ul>
                    <li>Peach</li>
                    <li>Pear</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>