CSS定位

Question

似乎無法弄清楚為什么我的導航欄沒有向左浮動。 現在已經搞砸了一個小時，不知道發生了什么。 任何幫助將不勝感激。

http://ithacawebdesigners.com/temp_data/wildfirewp/

Answer 1

降低#lamp的頂部邊緣，並去除#header和#lamp的浮標。 然后它將在標題下流動。 不需要時不要使用浮點數。

Answer 2

它向左浮動-位於徽標之后。 由於瀏覽器窗口中有足夠的空間，因此它位於徽標旁邊。 縮小瀏覽器窗口，它將下拉。

我認為您不需要浮動該東西-將浮動物移出，它將位於徽標下方的左側。

Answer 3

這是因為您的標頭也已浮動。 如果您想將其移到左側，則需要清除浮動。 將其添加到導航頭之前的標題之后。

<div class="clear"></div>

完成此操作后，您的導航欄就會有一個間隙，您可以通過調整#lava邊距來解決。

#lamp {
margin:25px 0 0;
}

Answer 4

在#lamp添加clear:left並刪除上邊距。

Answer 5

燈浮動在標題的左側，請添加一個清除符號：

[編輯] ...或取出浮子，您不需要熱

Answer 6

不要同時使用“ clear clear”和“ left”或其他任何亂碼。

您想在.lavalamp類上使用

位置：絕對； top：100px; 正確：0px;

確保刪除.lavalamp類上的相對位置。 根據需要調整頂部和右側。 您可能只想指定left：0px;

添加位置：相對於您的#wrapper div。

那應該做的兄弟。

:)

Answer 7

您不需要浮標。 將菜單放在代碼中圖像的前面。 拆下浮子。 給標題容器留出足夠的空間以容納菜單和圖像，並且它們應該流動，菜單在左側，圖像在右側。

同樣，菜單上的嵌套看起來也很：

<ul class="lavaLamp">
            <li class="current"><a href="#">Home</a></li>
            <li><a href="#">Menu</a></li>
            <li><a href="#">Events</a></li>
            <li><a href="#">Links</a></li>
            <li class="back"><div class="left"></div></li>

        <li style="left: 15px; width: 65px; display: list-item;" class="back"><div class="left"></div></li></ul>