CSS列表樣式沒有排隊

Question

試圖讓這些列表標題正確排列，但我無法弄清楚它的理由讓它排隊。試圖像第二個那樣來設計風格，但是那些大膽的標籤正在推動它的發展。

<div class="block"> 
    <ul class="toc partThree"> 
     <li><b>39:</b><a href="#">Maintaining This Diet</a></li> 
     <br/> 
     <li><b class="parts">Part 3A:</b><a class="partslink" href="#"> About Fruit Consumption</a></li> 
     <li><b>40:</b><a href="#">Ideal Fruit-combinations</a></li> 
     <li><b>41:</b><a href="#">Fruits To Go</a></li> 
     <li><b>42:</b><a href="#">Salads &amp; Shakes</a></li> 
     <li><b>43:</b><a href="#">Fruits In General</a></li> 
     <li><b>44:</b><a href="#">About Consuming Nuts</a></li> 
     <br/> 
     <li><b class="parts">Part 3B:</b><a class="partslink" href="#"> About Consuming Animal Food</a></li> 
     <li><b>45:</b><a href="#">About Fresh Raw Fish</a></li> 
     <li><b>46:</b><a href="#">About Fresh Raw Egg Yolk</a></li> 
     <br/> 
     <li><b class="parts">Part 3C:</b><a class="partslink" href="#"> The Most Important Section of This book</a></li> 
     <li><b>47:</b><a href="#">Remember That...</a></li> 
     <li><b>48:</b><a href="#">The Rules</a></li> 
     <li><b>49:</b><a href="#">The Obstacles</a></li> 
     <li><b>50:</b><a href="#">Cravings</a></li> 
     <li><b>51:</b><a href="#">Traps</a></li> 
     <li><b>52:</b><a href="#">How To Pick Munch-foods</a></li>       
     <li><b>53:</b><a href="#">Protein Contents</a></li> 
     <li><b>54:</b><a href="#">Single Munch-food Items</a></li>       
     <li><b>55:</b><a href="#">Munch-food Meals</a></li> 
    </ul> 
</div> 

這裏是CSS：

.toc{ 
    list-style:none; 
    font-size: 15px; 
} 
.toc li{ 
     margin:0 0 0 10px; 
     width: 220px; 
     overflow:hidden; 
     font-size:13px; 
     font-family:Arial; 
    } 
    .toc b{ 
     float:left; 
     padding: 0 4px 0 0; 
     font-weight:bold; 
    } 
    .toc a{ 
     float:left; 
     width:191px; 
     padding:0 0 0 0px; 
     color: black; 
     text-decoration:none; 
    } 
    .toc a:hover{ 
     color: rgba(0,0,0,.8); 
     text-decoration: underline; 
    } 
    b.parts{ 

    } 
    a.partslink{ 

    } 

Answer 1

http://jsfiddle.net/QbUvD/

做了一些調整，特別是去除浮動。這是假設你不使用上面的counter-reset建議（儘管如此，你必須重構很多你的HTML看起來）。

我在這裏使用的技巧是添加一個填充左標題爲li的標題（添加一個類.title），然後使用負文本縮進來包裝第一行，但允許第二個填充。這裏唯一的缺點是需要在填充/縮進值上使用手動寬度，但它實現了你想要的外觀。