浮动标识与顶级菜单对齐

Question

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

我无法使菜单对齐到徽标底部（其中有float: left;）。另外，在所有元素边框（border: 1px solid;）上成功测试边距设置后，我删除边框的所有内容都会重新调整，并且我必须添加padding: 1px;才能保留它们。

有人可以请看看，并告诉我有关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; 
} 

当然，如果需要，您可以tweek零点的填充。