Question

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

我的侧边栏中有一个<div>，底部会显示额外的空格，大约150px的空白空间，我在CSS中找不到任何空格。我想知道我的CSS中是否有一个冲突的规则，但是也找不到。我把头发拉到这里是因为这似乎应该是直接修复，但边缘底部：0，填充底部：0，定义高度，似乎没有任何工作来修复它，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

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

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

styles.css中的更改：更改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; }

class

html中的更改：将hr添加到<div id="articles_prev"> ... <hr class="clearBoth"> ... </div>

{{1}}

Strange Bottom Margin / Whitespace添加到<ul> </ul>

1 个答案: