需要通過CSS Pro清除

Question

我認爲我的頂級導航欄有點雜亂，但我不知道如何以其他方式來完成。每次我重新加載頁面，它都會跳轉一毫秒。 （顯示列表式的項目符號），我甚至可以看到list-style：none應用於父項對象。

此外，請注意按鈕沒有完全居中。這是爲什麼？有些是，有些不是。他們都是16x16的圖像。我試着簡單地通過添加一個或兩個類來添加和更改按鈕。我希望圖片和文字儘可能居中在按鈕參數之間。

我希望「#nav_login_welcomeuser」保持在尺寸明智的位置，但其他所有位置都需要拉伸並填充寬度爲920px的條。

浮動：左sl？？我認爲這是頁面第一次加載時引起的跳躍行爲。

下面的代碼：http://jsfiddle.net/N6SQe/

Answer 1

看到了一會兒聲音就像Flash Of Unstyled Content (FOUC)名單子彈，但那是在usally在特定情況下的特定瀏覽器的錯誤。您需要提供有關您看到的瀏覽器的更多詳細信息，並且可以將樣式表包含在實際頁面中。

（我後來發現：在可見的子彈可能是因爲你只爲list-style提供一個值，但它是一個捷徑屬性，可以取兩個用list-style: none none;。）

有些事情你應該做的/看出來：

• 始終將寬度/高度屬性賦予HTML中的圖像。這將防止佈局跳躍。 （順便說一句，你可以使用的服務，如http://placehold.it/爲佔位符圖形。）
• 這是一個菜單，以便使用鏈接（a元素，而不是span），並把裏面的圖片，因爲用戶希望能夠在圖像上單擊。他們甚至想要點擊整個「矩形」，所以在鏈接上填充填充和大小屬性而不是li - 特別是因爲您將hover效果放置在li上，導致用戶認爲他可以單擊「矩形「，即使他不在鏈接上。在li上:active沒有多大意義。
• 你需要小心固定寬度和高度的像素。請記住，用戶可以覆蓋字體大小（不是每個人都可以讀取12像素大小的文本！），如果文本變大，它將自動換行並且/ oder被截斷，這不僅醜陋，而且不可讀也不可用。您的設計需要靈活地反應不同的字體大小。
• 不要重複屬性。例如，在頂層元素中定義一次字體樣式。
• :first/last-child規則是不必要的。它們只重複列表項已有的屬性，除了可以放在列表本身上的邊框。
• 什麼是margin-left: -10px;？

這是我會怎麼做：http://jsfiddle.net/uSgDt/4/

---

編輯：爲了讓項目拓展，唯一的辦法就是將其顯示爲表。請參閱http://jsfiddle.net/uSgDt/6/

但是，這不支持IE6。如果您需要在IE6中正確顯示，則必須實際使用HTML表格。