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

Question

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

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

如有任何帮助或建议，我们将不胜感激。

这是我的 CSS 和 HTML 片段以及指向网站本身的链接。

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; 
}

Answer 1

要解决这个问题，你必须删除 hr-css 定义中的 clear: both;，因为它会停止 float 并在最高的 float dom 元素。

在此之后，div 中的 id“articles_prev”会出现问题。你可以通过添加一个名为 e.g. 的 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>