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/

做了一些调整，尤其是移除花车。这假设您没有使用上面的反重置建议（尽管如此，您似乎必须重构很多HTML）。

我在这里使用的技巧是向标题添加一个填充左边（添加一个类.title）然后使用负文本缩进来回绕第一行，但允许第二行保留填充。这里唯一的缺点是需要在填充/缩进值上设置手动宽度，但它可以实现您想要的外观。