我正在将一个 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>
我想弄清楚如何使子列表中的第一个条目与年份水平对齐。像这样:
2011 Lemon
Orange
Plum
嵌套元素让我头疼,我被困住了。我有一种感觉,这将涉及元素的显示类型和一些 float 。有任何想法吗?在这里 fiddle :http://jsfiddle.net/HUH62/4/ 谢谢。
最佳答案
如果我理解正确,这里是根据您要完成的任务修改的同一个 fiddle :fiddle .
我添加了一些类以使 CSS 更具可读性,并将每个部分的“副标题”包装在一个 div 中,以便可以对其应用 float 。
我还删除了颜色,因为我认为添加它们只是为了使元素可视化。
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>
关于html - 显示/ float ,样式列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16777542/