浮动徽标与顶部菜单对齐

Question

我正在尝试创建一个标题，其中我在屏幕的左上角有徽标。在徽标的右侧并与其基准对齐，我想放置一个顶级菜单。我没有使用任何CSS框架，所有HTML和CSS代码都位于here。

我无法将菜单对齐到徽标的底部（具有float: left;）。此外，在成功测试了所有元素（border: 1px solid;）边框的边距设置后，我删除边框的所有内容都会重新洗牌，我必须添加padding: 1px;才能使它们保持原位。< / p>

有人可以看看并告诉我相关CSS的正确应用吗？

修改
请注意，代码确实有效。我的问题是它是一个黑客（基本上添加不存在的填充来完成工作）。

Answer 1

我建议你做的是绝对定位徽标和导航容器，然后设置每个元素的位置和大小以适应。这个IMHAO比浮动头元素更健壮，更可靠。

即在css中：

header {
    width: 100%; height: xpx;
    postion:relative; /* This makes elements inside that have position:absolute act relative to the container, useful if you need to move it around */
    top:0; left:0;
}

#logo {
    background: blah; width:xpx; height:xpx;
    position: absolute;
    top:0px; left:0px; 
}

nav.top_nav {
    width:xpx; height:xpx;
    position: absolute;
    top:0px; left:[header width + some padding]px;
}

当然，如果需要，你可以调整零填充。