css - 对齐 div 和 ul

Question

1. 我需要菜单(主页、投资组合、服务、关于)在中间和左侧对齐。
2. div#header-login 应该正确对齐

我怎样才能完成这些任务？

为了解决第一个问题，我把 div 放在 display: inline;但出于某种原因，ul#header-menu 在顶部留下了一个空间

为了解决第二个问题，我尝试将 div#header-login 设置为 100% 宽度，从而使文本右对齐，但失败了。

Here是完整的代码:

Answer 1

实现此目的的最简单方法是确保将标题中的所有内容都 float 。由于当前混合了一些 float 和一些非 float (加上一些带有 display:inline 的元素)，如果您需要它在旧版本的 Internet Explorer 中工作，这将很难管理并且可能会出现问题。

我对您的 jsFiddle 做了一些小的修改。这现在使标题中的 3 个元素 float ，并将 float 清除应用于标题 div 本身，以便标题后的内容正确清除(还有注释示例说明您需要如何为具有条件样式表的 IE 执行此操作)。

http://jsfiddle.net/y4Qyw/1/

我没有特别调整间距，但现在应该通过一些填充和/或边距将所有内容放置在您想要的位置。在这种情况下自动垂直定位是不可能的，除非你正在使用 display:table-cell(这不是完全跨浏览器)，所以你只需要垂直向下偏移你的菜单以使其居中对齐。