浮動標識與頂級菜單對齊

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零點的填充。