2

好的。这真的很奇怪，我花了无数个小时徒劳地寻找类似的东西。我将添加代码，但您也需要视觉效果，因此我将包含一些裁剪的图像来向您展示我的意思。

我的目标：简单。将页脚中的水平导航栏推到页脚顶部边缘下方约 25 像素处。（页脚有静态背景图片） 使用的代码：#footer ul {margin:25px} 结果：没有变化。

嗯？所以我玩了它......尝试了几种变化，但没有任何效果。现在，我确实找到了一种解决方法......使用填充而不是边距......但让我感到困扰的是边距不起作用所以我一直试图弄清楚我是否在某个地方搞砸了我的代码。

我在体内使用了浮动，但我取消了它。验证一切正常。所以我不小心偶然发现了 Firebug（以前从未使用过它......而且仍然不知道如何）但是在我漫无目的的点击中，我注意到了一些奇怪的东西......当我点击我的页脚 ul 时，一个与页脚和内容重叠的框被突出显示。所以看起来我的利润确实存在，但不是将我的导航列表向下推......它保持导航列表静态，并扩展到内容。

嗯？所以我做了一个小实验。我在内容、页脚和 ul 中的 div 周围创建了一个明亮的边框，以弄清楚到底发生了什么。（我的内容部分有三个 div：内容（向左浮动）；侧边栏（向右浮动）；以及包含两者的 contentWrapper）。

打开边框后，我注意到我的“outerContent” div 已折叠。仅占该区域高度的 20% 左右。所以经过一些（长时间的）研究，我想出了溢出自动修复。尽管我仍然不太了解它，但它确实有效。contentWrapper 扩展以满足页脚，并且页脚 ul 移动到我想要的位置。所以问题解决了，对吧？嗯……不完全是。

我的预览效果很好，所以我回去删除了边框，这样我就可以继续进行其余的格式设置了。只有当我再次预览时……页脚 ul 又回到了它开始的地方。在页脚顶部的最边缘。

我再次做了边框... div 看起来不错，除了 contentWrapper 现在被推到页脚上方以留出该边距。现在真正奇怪的是，当我在页脚周围放置边框时...... ul 边距有效。当我把它取下来...... ul 回到原来的位置。

#$@%! 是什么？尽管我知道解决方法（填充），但我担心会加重我所犯的任何错误并在未来不断重复（此后我必须建立另一个网站）。如果有人能弄清楚我做了什么把事情搞砸了……那将不胜感激。

#contentWrapper {
    overflow: auto;
    padding: 20px 10px;
}
#content {
    float: left;
    width: 660px;
}
#content h1 {
    padding: 0 0 20px;
}
#content h2 {
    padding: 20px 0 10px;
}
#content p {
    line-height: 160%;
    text-align: justify;
}
#content img {
    float: left;
    margin-right: 10px;
}
#content ul {
    line-height: 160%;
    list-style: disc outside url("../images/Bullet-artsy1.png");
    margin: 0 0 10px 325px;
    padding: 10px 0;
}
#content .info {
    margin: 5px 0 10px 250px;
}
#rightSide {
    float: right;
    line-height: 140%;
    padding: 0 10px;
    width: 220px;
}
#rightSide h2 {
    margin-top: 10px;
    padding-bottom: 10px;
}
#rightSide p {
    font-family: Georgia,"Times New Roman",Times,serif;
    font-size: 16px;
    text-align: justify;
}
#rightSide img {
    display: block;
    margin: 5px auto;
}
#footer {
    background-image: url("../images/TCS-Footer1b-plain-230px h.png");
    background-repeat: no-repeat;
    clear: both;
    height: 230px;
}
#footer ul {
    list-style: none outside none;
    margin: 25px;
    text-align: center;
}
#footer ul li {
    display: inline;
    margin: 30px 0;
}
#footer ul li a {
    color: #E8FAFF;
    padding: 30px;
}
#footer p {
    color: #E8FAFF;
    text-align: center;
}
#footer img {
    bottom: -60px;
    position: relative;
    right: -900px;
}

该网站不活跃，但我上传了一个文字文档，其中包含显示我正在谈论的内容的图像。这是临时共享的链接：http: //temp-share.com/show/dPf3UCobW

提前感谢所有可能告诉我我哪里出错的人。

4

3 回答 3

0

这是供将来参考。我只是想添加以下链接来赞美上面的 Dom Day。我仍然难以概念化该事件，但在这两个链接之间，它将帮助我研究它，直到我找到相当于“相邻/折叠边距”的网站。www.w3.org/TR/CSS2/box.html - 网页底部附近的详细信息。

于 2013-07-19T23:37:19.540 回答
0

我使用firebug对其进行了测试并且工作正常。如果您有问题，您可以在末尾添加 !important

#footer > ul {
    margin: 13px !important;
}

甚至您想要做的是在 ul 之前和之后获得一些利润。为此，您可以为#footer 设置边距和/或填充值。

希望这有帮助！

于 2013-07-19T07:27:57.833 回答
0

首先，为了防止你的边距消失，要么将#footer ul元素上的边距更改为填充，要么为元素添加一个 px 的填充#footer。

在这个小提琴中，我们将填充设置#footer为 1px 并将高度降低了 2px 以进行补偿。

小提琴

#footer ul {
    list-style: none outside none;
    padding: 40px;
    text-align: center;
}

或者

#footer {
    background-color: #DDDDDD;
    background-repeat: no-repeat;
    clear: both;
    color: #808080;
    font-size: 12px;
    height: 228px;
    padding: 1px;
}

查看css，<a>标签上的填充设置不会按您期望的方式工作，因为默认情况下它们不是块元素。将此添加到 css 以正确填充它们：

#footer ul li a { 
    display: inline-block;
 }

同样，您ul li应该是内联块。

所以 ...

#footer ul li {
    display: inline-block;
    margin: 30px 0;
}
#footer ul li a {
    display: inline-block;
    color: #E8FAFF;
    padding: 30px;
}

基本上，请注意，当顶部和底部边距接触时，包括父元素和子元素的边距，使用最大的边距，但边距被推到最外面的元素之外。

于 2013-07-19T07:35:55.143 回答