Question

我已经为li本身添加了填充和边距，但它将它们隔开太远了。我试图弄清楚为什么较长的章节不会只是将底线推到一条线并继续前进。

这是我的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

我不确定你要做什么，但为什么不使用ordered list而不需要手动输入部件？

Answer 2

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

.toc li {
    width: 220px;
}

DEMO

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

Answer 3

这样做是因为你正在修复LI的高度，如果你移除了高度，你还必须“包含”或“清除”漂浮的H3。一种方法是设置LIs溢出属性。

.toc li {
    width: 220px;
    overflow:hidden;
}

http://www.quirksmode.org/css/clearing.html

（我也非常确定将这些BR放在你所拥有的UL中是无效的HTML）

重叠列表，CSS并没有推低它

3 个答案: