奇怪的底部边距/空白添加到 <ul>答案

【问题标题】：Strange Bottom Margin/Whitespace added to <ul>奇怪的底部边距/空白添加到 <ul>
【发布时间】：2011-08-28 11:34:25
【问题描述】：

这是我关于 SO 的第一篇文章，我已经浏览了几篇类似标题的文章来找到这个问题的答案。我已经盯着它看了几个小时，并认为可能有一个明显的答案在盯着我看，但到目前为止它一直在躲避我:(

我的侧边栏中有一个<div>，它在底部显示有额外的空白，大约 150 像素的空白在我可以找到的任何地方的 CSS 中都没有定义。我想知道我的 CSS 中是否定义了冲突的规则，但也找不到。我在这里拉头发，因为这似乎应该直接修复，但是 Margin-bottom: 0, Padding-bottom: 0, defined height, 似乎没有什么可以修复它而且 Firebug 甚至没有显示空白作为边距或填充。当我为有问题的 div 定义宽度或边距时，错误似乎才浮出水面。我试着简单地不定义任何一个，但是我嵌套的 ul 和 li 的宽度不适合包含它们的内容。

任何帮助或建议将不胜感激。

这是我的 CSS 和 HTML 的 sn-ps 以及指向网站本身的链接。

http://www.niagarathistle.com/clients/weekendhousewife/index.html

HTML：

<div id="category">
<div id="everyday_life">
    <h3 class="life"><a href="" rel="" title="">Everyday Life</a></h3>
    <div class="ribbon_fold_bottomright"></div><!-- to position the ribbons's bottom-right fold triangle -->
                                <ul>
                                    <li><a href="(EmptyReference!)" rel="" title="Read (TITLE OF THE POST) post">(The title of the Post)</a></li>
                                    <li><a href="(EmptyReference!)" rel="" title="Read (TITLE OF THE POST) post">(The title of the Post)</a></li>
                                    <li><a href="(EmptyReference!)" rel="" title="Read (TITLE OF THE POST) post">(The title of the Post)</a></li>
                                </ul>
                                <p class="view_more">[<a href="(EmptyReference!)" rel="" title="View more posts from the Everyday Life Category">view more posts</a>]</p>
                            </div>
                            <div id="cooking">
                                <h3><a href="" rel="" title="">Weekend Cooking</a></h3>
                                <div class="ribbon_fold_bottomright"></div><!-- to position the ribbons's bottom-right fold triangle -->
                                <ul>
                                    <li><a href="(EmptyReference!)" rel="" title="Read (TITLE OF THE POST) post">(The title of the Post)</a></li>
                                    <li><a href="(EmptyReference!)" rel="" title="Read (TITLE OF THE POST) post">(The title of the Post)</a></li>
                                    <li><a href="(EmptyReference!)" rel="" title="Read (TITLE OF THE POST) post">(The title of the Post)</a></li>
                                </ul>
                                <p class="view_more">[<a href="(EmptyReference!)" rel="" title="View more posts from the Weekend Cooking Category">view more posts</a>]</p>
                            </div>
                            <div id="photography">
                                <h3><a href="" rel="" title="">Photgarphy</a></h3>
                                <div class="ribbon_fold_bottomright"></div><!-- to position the ribbons's bottom-right fold triangle -->
                                <ul>
                                    <li><a href="(EmptyReference!)" rel="" title="Read (TITLE OF THE POST) post">(The title of the Post)</a></li>
                                    <li><a href="(EmptyReference!)" rel="" title="Read (TITLE OF THE POST) post">(The title of the Post)</a></li>
                                    <li><a href="(EmptyReference!)" rel="" title="Read (TITLE OF THE POST) post">(The title of the Post)</a></li>
                                </ul>
                                <p class="view_more">[<a href="(EmptyReference!)" rel="" title="View more posts from the Photography Category">view more posts</a>]</p>
                            </div>
                            <div id="scrapbooking">
                                <h3><a href="" rel="" title="">Memory Keeping</a></h3>
                                <div class="ribbon_fold_bottomright"></div><!-- to position the ribbons's bottom-right fold triangle -->
                                <ul>
                                    <li><a href="(EmptyReference!)" rel="" title="Read (TITLE OF THE POST) post">(The title of the Post)</a></li>
                                    <li><a href="(EmptyReference!)" rel="" title="Read (TITLE OF THE POST) post">(The title of the Post)</a></li>
                                    <li><a href="(EmptyReference!)" rel="" title="Read (TITLE OF THE POST) post">(The title of the Post)</a></li>
                                </ul>
                                <p class="view_more">[<a href="(EmptyReference!)" rel="" title="View more posts from the Memory Keeping Crafts Category">view more posts</a>]</p>
                            </div>
                            <div id="crafts">
                                <h3><a href="" rel="" title="">Homemade Crafts</a></h3>
                                <div class="ribbon_fold_bottomright"></div><!-- to position the ribbons's bottom-right fold triangle -->
                                <ul>
                                    <li><a href="(EmptyReference!)" rel="" title="Read (TITLE OF THE POST) post">(The title of the Post)</a></li>
                                    <li><a href="(EmptyReference!)" rel="" title="Read (TITLE OF THE POST) post">(The title of the Post)</a></li>
                                    <li><a href="(EmptyReference!)" rel="" title="Read (TITLE OF THE POST) post">(The title of the Post)</a></li>
                                </ul>
                                <p class="view_more">[<a href="(EmptyReference!)" rel="" title="View more posts from the Homemade Crafts Category">view more posts</a>]</p>
                            </div>
                        </div>

CSS：

#sidebar {
    border-left: 1px dotted #231f20; 
    width: 170px; 
    padding: 0 15px; 
    margin: 0 0 15px 730px; 
}
#sidebar h3 {
    font-size: 12px; 
    letter-spacing: 1.5px; 
    color: #fff; 
    height: 25px; 
    background: #231f20 url(../images/ribbon_left.gif) left center no-repeat; 
    text-align: right; 
    line-height: 26px; /* to vertically center text on background */ 
    width: 194px; 
    padding-right: 5px; 
    margin: 0 0 5px -5px;  
    border-top: 1px #f5eee8 solid; 
    border-bottom: 1px #f5eee8 solid; 
    font-weight: normal; 
    z-index: 2; /* to properly position the h3 ribbon's bottom-right fold triangle */
}
#sidebar #category h3 {
    margin-left: 10px; 
}
#sidebar div#category div, 
#sidebar div#blogroll, 
#sidebar div#cookbooks {
    position: relative; /* to position the h3 ribbon's bottom-right fold triangle */
}
#sidebar div#category div div.ribbon_fold_bottomright, 
#sidebar div#blogroll div.ribbon_fold_bottomright, 
#sidebar div#cookbooks div.ribbon_fold_bottomright { /* to position the h3 ribbon's bottom-right fold triangle */
    position: absolute; 
    z-index: 1; 
    border-style: solid; 
    height: 0; 
    width: 0; 
    top: 27px; 
    left: 184px; 
    border-color: transparent transparent transparent #231f20; 
    border-width: 0 0 10px 10px;
}
#sidebar div#category div div.ribbon_fold_bottomright {
    left: 214px; 
}
#sidebar ul li {
    list-style: none; 
}
#sidebar div#category div { /* BUG FireFox - This rule breaks the Sidebar layout, it adds too much whitespace to bottom of Category <ul>. Why? */
    margin: 0 0 20px -15px; 
    width: 175px; 
}
#sidebar div#category h3 a {
    color: #fff; 
    text-decoration: none; 
}
#sidebar div#category h3 a:hover {
    color: #ff7e99;;
    text-decoration: none; 
}
#sidebar div#category ul li {
    border: none; 
    margin-left: 0; 
    padding: 0; 
}
#sidebar div#category ul li:last-child {
    border-bottom: none; 
}
#sidebar div#category div ul {  
    margin-bottom: 0; 
}
#sidebar div#category p.view_more {
    margin: 0 0 0 15px; 
    font-size: 1.0em; 
}
#sidebar div#blogroll {
    text-align: center; 
}
#sidebar div#blogroll select {
    margin: 0 0 20px 10px; 
}
#sidebar div#cookbooks {
    text-align: center; 
}

【问题讨论】：

我建议您使用 Firebug 来查看样式规则是如何应用于您的元素的。再加上开发者工具栏，应该可以看到多余的空间是从哪里来的。
我最初尝试过，Firebug 什么也没显示，只是给定的边距和填充，这并没有导致问题。它甚至没有突出显示空格——如果它在 Firebug 中不存在的话。

标签： css

【解决方案1】：

要解决这个问题，你必须删除hr-css 定义中的clear: both;，因为它会停止浮动并在最高浮动的dom元素之后设置垂直位置。

在此之后，div 中的id“articles_prev”将出现问题。您可以通过添加名为例如 class 来解决此问题。 clearBoth 到此div 中的hr。在 css 文件中定义 .clearBoth，仅使用 clear: both;。就是这样。

styles.css 中的更改：更改 hr 并添加 clearBoth

hr {
    background: url("../images/flourish_divider.png") no-repeat scroll center center transparent;
    border: medium none;
    color: #333333;
    height: 15px;
    margin: 10px auto;
    width: 90%;
}

.clearBoth {
    clear: both;
}

您的 html 中的更改：将 class 添加到 hr

<div id="articles_prev">
    ...
    <hr class="clearBoth">
    ...
</div>

【讨论】：

谢谢！谢谢你！谢谢你！这工作得很好，我可以停止拉我的头发了。所以我知道将来该怎么做，为什么会发生这种情况？
已经设置为清除：两者。我不明白为什么我必须设置一个单独的类来强制这个特定的
以及为什么它打破了我侧边栏中的浮动。你能给我一个解释吗？
啊哈！我现在在使用原始文件中的大量代码创建的第二页时遇到了同样的问题。布局略有不同，但侧边栏在 HTML 和 CSS 中都没有改变。但是，现在我的 BLOGROLL div 中有空格，我仍然不知道为什么会发生这种情况。如果没有 hte 为什么我无法自行修复，我可以按照您的指示针对特定实例进行操作。任何帮助和推动对为什么会发生这种情况的良好解释都会有所帮助。
clear: both 停止浮动并在最深的 dom 元素之后设置垂直位置。在您的网站中，您使用浮动将侧边栏设置在 content_container 旁边。在您为文章使用浮动的 content_container 中的附加内容。您必须停止在它们之后漂浮，因此您将clear 添加到所有hrs。侧边栏中的hr 也停止了浮动，但没有额外的浮动；因此它会停止主浮动（content_container 旁边的侧边栏）并在最深元素之后设置位置。总之，您需要文章后面的clear，而不是sidebar。