Question

我需要菜单（家庭，投资组合，服务，关于）在中间和左侧对齐。
div＃header-login应该是正确的

我如何完成这些任务？

为了解决第一个问题，我把div放在显示：inline;但由于某种原因，ul＃header-menu在顶部留下了一个空格

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

Here是完整的代码：

Answer 1

这是交易：

div#header
{
    clear:both;
    overflow:hidden;
}
div#header-login
{
    text-align: right;
    overflow:hidden;
    float:right;
    margin-top:-30px;
}
img#header-logo
{
    display: block;
    float:left;
}

ul#header-menu
{
    margin: 0 auto;
    padding: 15px;
    display: block;
    list-style-type: none;
    overflow:hidden;
}

Answer 2

实现此目的的最简单方法是确保将所有内容浮动到标题中。使用一些float和一些非float的当前组合（加上一些带有display：inline的元素），如果你需要在旧版本的Internet Explorer中使用它，这将很难管理并且可能会出现问题。

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

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

我没有特别调整间距，但现在应该是一种形式，用一些填充和/或边距来定位你想要的所有东西。除非您使用display：table-cell（不完全是跨浏览器），否则在这种情况下无法进行自动垂直定位，因此您只需向下垂直偏移菜单即可使其居中对齐。

对齐div和ul

2 个答案: