CSSリストスタイルが整列していない

Question

これらのリスト見出しを正しく整列しようとしましたが、整列させるための正当性を理解できません。 2つ目のようにスタイルを設定しようとしていますが、大胆なタグはそれを1行下に押し出しています。ここで

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

は特にフロートを削除する、いくつかの調整を行いました。これはカウンターリセットの上記の提案を使用しないことを前提としています（あなたのHTMLの多くを再構成しなければならないかもしれませんが）。

私がここで使っているトリックは、liであるtitle（クラスを追加する.title）を追加してから、最初の行を折り返すために負のtext-indentを使用しますが、パディングここでの唯一の欠点は、パディング/インデント値に手作業の幅が必要だが、それはあなたが望む外観を達成することである。