css - 重叠列表，CSS 并没有将其向下推

Question

我已经为 li 本身添加了填充和边距，但它们间隔得太远了。我想弄清楚为什么较长的章节不会将底部的 li 推到一行并继续进行下去。

Here is the test page.

这是我的 HTML:

    <div id="sidebar">
            <h2> <a href="#">Contents</a> </h2>
            <div id="accordion">
                <h3><a href="#">Part 1: Food  the Skin</a></h3>
                <div>
                    <ul id="partOne" class="toc">
                        <li><h3>01:</h3><a href="#">The Use of Fire</a></li>
                        <li><h3>02:</h3><a href="#">Downsides to Using Heat</a></li>
                        <li><h3>03:</h3><a href="#">Altered Protein</a></li>
                        <li><h3>04:</h3><a href="#">Protein Digestion</a></li>
                        <li><h3>05:</h3><a href="#">Protein in the Skin</a></li>
                        <li><h3>06:</h3><a href="#">Decomposition of Redundant Protein</a></li>
                        <li><h3>07:</h3><a href="#">Protein & Water</a></li>
                        <li><h3>08:</h3><a href="#">Swollen Skin,Cellulite & Treatments</a></li>
                        <li><h3>09:</h3><a href="#">Dry Skin</a></li>
                        <li><h3>10:</h3><a href="#">How to Rid </a></li>
                        <br/>
                        <li><h3>11:</h3><a href="#">Cellulite</a></li>
                        <li><h3>12:</h3><a href="#">Visibility of Fat Cells </a></li>
                        <li><h3>13:</h3><a href="#">Cellulite & Skin Tone</a></li>
                        <li><h3>14:</h3><a href="#">Cellulite & Treatments</a></li>
                        <br/>
                        <li><h3>15:</h3><a href="#">Acne: In Short</a></li>
                        <li><h3>16:</h3><a href="#">Acne & Hygiene</a></li>
                        <li><h3>17:</h3><a href="#">Acne & Hormones</a></li>
                        <li><h3>18:</h3><a href="#">Acne & Peeling </a></li>
                        <li><h3>19:</h3><a href="#">How to Eliminate Acne, Cellulite & Treatments</a></li>
                        <li><h3>20:</h3><a href="#">What Type of Acne</a></li>
                        <li><h3>21:</h3><a href="#">Susceptibility to Acne</a></li>
                        <li><h3>22:</h3><a href="#">Menstruation & Acne</a></li>
                        <li><h3>23:</h3><a href="#">Acne & Diet-results, Cellulite & Treatments</a></li>
                    </ul>
                </div>

                <h3><a href="#">Part 2: Nutrients & Toxins</a></h3>
                <div>Second content</div>
                <h3><a href="#">Part 3: The Diet</a></h3>
                <div>Second content</div>
                <h3><a href="#">Part 4: Losing Weight Naturally & Lastingly</a></h3>
                <div>Second content</div>
            </div>
</div>

这是我的 CSS:

        #accordion{
        margin: 10px;
    }
        #accordion h3{
            font-size:16px;
        }
        #accordion h3 a{

        }
        #accordion h3 a:hover{

        }
        .toc{
            list-style:none;
            font-size: 14px;
        }
            .toc li{
                width: 220px;
                height:18px;
            }
            #accordion div > ul{
                padding: 10px 0 0 0;
            }
            #partOne h3{
                float:left;
                width: 25px;
                padding: 0 3px 0 0;
                font-weight:normal;
            }
            #partOne a{


                color: blue;
                text-decoration:none;
            }
            #partOne a:hover{
                text-decoration: underline;
            }

几个小时后无法解决这个问题!

Answer 1

从 .toc li 样式声明中删除 height 属性:

.toc li {
    width: 220px;
}

• > DEMO

如果您想设置 li 的行高，请使用 line-height CSS 属性。另外，考虑将 & 替换为 &，引用 HTML Entities .