[英]display/float, styling a list
我正在將一個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
嵌套的元素正在我的頭腦中,我被卡住了。 我有一種感覺,這將涉及元素的顯示類型和一些浮動。 有任何想法嗎? 這里小提琴: http : //jsfiddle.net/HUH62/4/謝謝。
如果我理解正確的話,這里根據你想要完成的事情修改同樣的小提琴: 小提琴 。
我添加了一些類,以使CSS更具可讀性,並在div中包含每個部分的“副標題”,以便可以對它們應用浮動。
我也刪除了顏色,因為我解釋它們只是為了可視化元素而添加的。
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.