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

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

啊啊啊！我问了一个关于我的 HTML 文件中的空白的问题，在这里得到了回答：Strange Bottom Margin/Whitespace added to <ul> 几天前。但是现在我在使用原始文件中的大量代码创建的第二页时遇到了同样的问题。布局略有不同，但侧边栏在 HTML 和 CSS 中都没有改变。但是，现在我的 BLOGROLL div 中有空格，我仍然不知道为什么会发生这种情况。如果没有我无法自行修复的原因，我可以按照特定实例的给定说明进行操作。任何帮助和推动对为什么会发生这种情况的良好解释都会有所帮助。

我的侧边栏中有一个在底部显示有额外空白的地方，大约 150 像素的空白在我可以找到的任何地方的 CSS 中都没有定义。似乎当我在我的主要内容部分添加段落时，这些 p 将我的 Blogroll div 推到了侧边栏的下方。我想知道我的 CSS 中是否定义了冲突的规则，但也找不到。我在这里拉头发，因为这似乎应该直接修复，但是 Margin-bottom: 0, Padding-bottom: 0, defined height, 似乎没有什么可以修复它而且 Firebug 甚至没有显示空白作为边距或填充。当我在主要内容部分添加段落时，错误似乎才浮出水面。

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

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

www.niagarathistle.com/clients/weekendhousewife/post.html

尝试发布我的代码，但不断收到错误消息，提示我正在发布图片。没有发布任何图像，甚至删除了我的 HTMl 中的所有 img 标签和我的 CSS 中的所有 url 调用 - 仍然出现错误。 SOOO，如果有人愿意回答我的问题，不能查看上面 URL 的源代码和 www.niagarathistle.com/clients/weekendhousewife/css/styles.css 的 CSS，请告诉我，我很乐意转发文本文件或尝试再次发布。

【问题讨论】：

在您的第一个 question 中查看我的新评论。

标签： css

【解决方案1】：

在您的 blogroll div 上方是一个 <hr> 标记，正在使用 styles.css 的第 114 行上的以下规则清除该标记

clear: both;

这将清除您的主要内容 div 上的浮动，因此它将所有内容推到您的 content_container div 下方的 <hr> 下方。您应该可以通过删除<hr>、删除clear:both; 或在<hr> 上专门设置clear:none; 来解决此问题

我建议在第 114 行下面添加以下规则：

#sidebar hr {clear:none;}

【讨论】：

如果我使用您的解决方案，由于#sidebar hr 未清除，这不会让我回到原来的问题吗？原来的问题。 stackoverflow.com/questions/7220682/…
@Charles 我试过你的解决方案，但它确实做到了，没有改变任何东西。但是，我注意到我给了你不正确的页面来查看。我已更新我的操作以显示指向我的网站页面的正确链接。您能否重新检查我的页面并告诉我如何解决此空白问题？
@Craig 我在你发布的新链接上没有看到问题，所以我假设你把一切都理顺了吗？

【解决方案2】：

又是一个浮动问题。以下解决方案适用于两个站点。

css 更改：从 fieldset, fieldset ol li fieldset 的 css 定义中删除 clear: left 和 float: left。

fieldset, fieldset ol li fieldset {
    background-color: transparent;
    border: medium none;
    margin: 0 0 15px;
    padding: 0;
    position: relative;
    width: 100%;
}

html 更改：删除 div 中的 div 和 class "clearfix" 和 id "blogroll"。

<div id="blogroll">
    <h3>Blogging Friends</h3>
    <div class="ribbon_fold_bottomright"></div>
    <form action="">
        <fieldset>
            <select onchange="window.open(this.value,'','');" name="friendsblogs" size="1">
                <option value="">Select Blog</option>
                <option value="(BLOG URL)">Friend's Blog</option>
                <option value="(BLOG URL)">Friend's Blog</option>
                <option value="(BLOG URL)">Friend's Blog</option>
                <option value="(BLOG URL)">Friend's Blog</option>
                <option value="(BLOG URL)">Friend's Blog</option>
            </select>
        </fieldset>
    </form>
</div>

【讨论】：