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看上去很像）。

我在这里使用的技巧是在作为标题的li的左边添加一个padding-left（添加一个class .title），然后使用负的文本缩进来换行第一行，但允许第二行保留该padding。 唯一的缺点是需要在填充/缩进值上设置手动宽度，但可以实现所需的外观。