CSS Header Image「Stacked」

Question

我一直在使用我的網站有一段時間的這個問題，所以我一直在使用圖片的標題，它的一切都很好，它改變了圖片，當我把它懸停在它上面，但後來完成把「家」，「新聞」，「登錄」，「註冊」和「聯繫」，我注意到，而不是將其全部旁邊的海誓山盟，這一切都可以疊加，就像這樣：

的CSS代碼： #menubar { 寬度：50％; margin：0 auto 0 auto; }

.home { 
    display: block; 
    width: 240px; 
    height: 100px; 
    background: url('IMG/Heading_Normal_and_Hover.png'); 
    background-position: 0 0; 
} 
.home:hover { 
    background-position: 0 100; 
} 
/***************************************************/ 
.news { 
display: block; 
    width: 240px; 
height: 100px; 
    background: url('IMG/Heading_Normal_and_Hover.png'); 
    background-position: -240 top; 
} 
.news:hover { 
    background-position: -240 bottom; 
} 
/***************************************************/ 
.register { 
    display: block; 
    width: 240px; 
    height: 100px; 
    background: url('IMG/Heading_Normal_and_Hover.png'); 
    background-position: 480 top ; 
} 
.register:hover { 
    background-position: 480 bottom; 
} 

/***************************************************/ 
.play { /*login*/ 
    display: block; 
    width: 240px; 
    height: 100px; 
    background: url('IMG/Heading_Normal_and_Hover.png'); 
    background-position: 720 top; 
} 
.play:hover { 
    background-position: 720 bottom; 
} 

/***************************************************/ 
.contact { 
    display: block; 
    width: 240px; 
    height: 100px; 
    background: url('IMG/Heading_Normal_and_Hover.png'); 
    background-position: 240 top ; 
} 
.contact:hover { 
    background-position: 240 bottom; 
} 

/***************************************************/ 

The HTML coding

Answer 1

你的問題通常從列出彼此相鄰，unfloated，這會導致他們得到彼此堆疊（而不是彼此相鄰）的頂部的多個塊元素莖。

有許多可能的方法來實現你想達到的目標。下面是其中的兩個：

1.浮動元素彼此相鄰

您可以通過浮動應用以下屬性的CSS定義的元素：

float: left; 

而left能也可以是right或none。

如果您有一個正常排列的元素列表，並且它們希望他們的位置彼此相鄰float，可以使用float:left。

嘗試將float: left添加到您的所有CSS定義（.news，.register等）。

一個更清潔的方式是創建一個CSS類：

.floatLeft { 
    float: left; 
} 

並應用類，所有受影響的元素：

<a class="floatLeft" href=""></a> 

然而，由於您使用<a>元素，可能希望使它們成爲塊元素，因此應用：

.floatLeft { 
    float: left; 
    display: block; 
} 

ca ñ有幫助。

通常我建議你使用菜單容器的<ul>元素和菜單按鈕的<li>元素。您仍然可以在<li>標籤內使用<a>元素。

請注意，您的父容器必須允許足夠的寬度來列出其子元素彼此相鄰，或浮動元素將包裝到下一個'行'。

Learn about floats here。

2。使用inline-block

您可以使用：

顯示：inline-block的

每個菜單按鈕，這將允許您以顯示彼此相鄰的多個元素。

如果你使用這種方法，記住，你可能需要設置：

white-space: nowrap 

在菜單容器。

你可能也遇到垂直對齊的問題 - 在這種情況下使用：

vertical-align: top 

每個元素（top或middle或bottom，這取決於你的需要）上。

其他信息

You can learn about the above two methods by following this link