CSS 布局问题（页脚和 UL 样式）答案

【问题标题】：CSS Layout Issues (Footer & UL Styling)CSS 布局问题（页脚和 UL 样式）
【发布时间】：2011-09-14 04:14:07
【问题描述】：

因此，我正在尝试为我的新作品集网站编写我的设计代码，但我在那里遇到了一些问题，研究和数小时将我的脸砸在电脑屏幕上尚未解决。现在有两个大问题我被困住了，尽管我目前正在考虑另一个问题，如果我什至想处理的话。

第一个问题是菜单。当您将鼠标悬停在它上面或在该页面上时，我希望字体从常规变为粗体。哪个有效。问题是当您将鼠标悬停在它上面时，菜单中的其他两项会稍微调整，因为类型权重的变化会将它们推出。到目前为止，我的尝试都以失败告终。

第二个问题是页脚。我希望它留在页面底部。我的研究让我走到了这一步，但不是我想要的，现在它实际上停留在浏览器的底部，而不是内容的底部。感谢您提供的任何帮助！

可以在以下位置找到相关页面：http://personal.justgooddesign.net/draft/

【问题讨论】：

关于页脚：你是在sticky footer之后吗？

标签： css layout footer html-lists

【解决方案1】：

您的页脚变得混乱，因为您向左浮动并向右移动。我个人对页脚的偏好总是starts with this very clean method 并从那里建立。如果您感到困惑，请将您的内部内容与页面的其余部分分开并进行测试。

对于字体，您必须像 UI 开发人员而不是图形设计师那样思考。与 Indesign、Illustrator 等不同，字体和间距并非 100% 像素完美。在一个浏览器中以一种方式呈现的内容将在另一种浏览器中呈现一种非常不同的方式。在网络上加粗字体会使其变大，并且会增加间距。为了弥补这一点，将您的菜单元素设置得更宽一些以进行补偿，然后疯狂地测试。如果您只依赖边距和内边距，那么粗体悬停元素每次都会推动菜单。

只是一个建议，将您的 css 设置在一个单独的文件中并加载它。代码将被缓存，这将提高后续加载的性能。此外，您可以通过做一个类来为您的元素附加样式并注意相对于其他元素的定位，从而为自己节省大量代码。无需为您的投资组合中的每个元素单独设置样式以进行定位。

【讨论】：

我在页脚的哪里向左浮动和向右清除？我在 li 元素中为页脚项目执行此操作以将它们全部排成一行，但这不会导致页脚像现在这样搞砸，是吗？至于顶部的菜单元素，我尝试将它们设置得更宽一些，但我尝试过的每种方法都失败了。对不起，如果我没有在这里得到它，我的编程能力还不够。我试试！我失败了很多:(
@justin，如果你向左浮动，那么你必须向左清除。如有疑问，请先尝试清楚：两者都先。浮动几乎总是会导致这些类型的对齐问题。其次，为了简化布局，可以将其视为一个包含元素的容器......浮动所有剩下的元素。第一个将从左上角开始，第二个位于第一个元素的右侧。它将耗尽父级中的空间，并向下移动到下一行，然后重复。如果您注意填充、边距等，那么您刚刚从页面中保存了 200 多行代码。最后别忘了清除！

【解决方案2】：

你可以通过在#menu li上设置固定宽度来修复菜单中的跳转，所以

#menu li {
display: block;
float: right;
width: 40px;   //something like this.
padding: 0px;
list-style-type: none;
position: relative;
text-align: center;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 20px;
}

编辑：

修复页脚问题

从#right 规则中删除height: 600px;
在#container div 和#footer div 之间添加一个空白br
```
</div>
<br style="clear:both;">
<div id="footer">
```

【讨论】：

谢谢！这有帮助。它将菜单推过容器的边界，我不知道为什么，但我只是把宽度弄乱了，使它再次排列。感谢您的帮助！
伙计，我在编写 CSS 代码方面一定很糟糕，因为我刚刚接受了您所有非常有用的建议并修复/破坏了页脚！这种布局似乎有很多与 CSS 相关的固有问题，我在这里非常迷茫。我要感谢大家的帮助，非常感谢！这里有很多技术错误，我什至不知道从哪里开始。

【解决方案3】：

您有浮动问题，因为您没有清除浮动。

您的 div#wrapper 将始终等于视口的高度。
您的 div#container 已折叠，因为您已将 div#left 浮动到“left”，将 div#right 浮动到“right”，并且还有绝对定位的 div#footer。它的作用是，它从文档的正常流程中获取这些 div，随后 div#contaiver 不会“包裹”在这三个 div 周围（div#left、div#right 和 div#fotter"）
div#right 也是如此。 div#intro 和 div#portfolio 已浮动在 div#right 内，它没有包装它的子 div。

有很多方法可以解决这些问题。我建议这个。在最后一个浮动元素之后包含以下代码。

<div class="float_clear"></div>

div.float_clear
{
clear: both;
}

对于菜单，空间不够，添加即可。

div#menu>ul>li
{
width: 50px;
}

【讨论】：

【解决方案4】：

试试这个解决你的页脚问题？

<p style = "clear:both">
<div id="footer">

还有

#right {
    clear: right;
    float: right;
    height: 600px; //Remove this line
    width: 490px;
    padding: 0px;
    margin-top: 0px;
    margin-right: 10px;
    margin-bottom: 20px;
    margin-left: 0px;
}

【讨论】：

刚试了，没用。不过还是谢谢你的建议！我对 CSS 的了解……可行，但并不先进。我需要进一步研究它。

【解决方案5】：

添加溢出：隐藏到容器中...

当你有浮动的东西时，在浮动内容周围放一个 div 并给它

溢出：隐藏；显示：块；宽度：（一些宽度）；

这将解决大多数浮动问题

【讨论】：