使標題與右側對齊的圖標HTML/CSS

我的網站上有一個標題，需要右側有一些圖標。我不知道該怎麼做，因爲圖標的位置正確，但div不會展開給它們，這應該是默認行爲。使標題與右側對齊的圖標HTML/CSS

下面是HTML：

<!DOCTYPE html> 
<html> 
<head> 

    <title>Kingdom Hearts 358/2 Days HD</title> 
    <link rel = "stylesheet" type = "text/css" href = "style.css"> 

</head> 
<body> 

    <div id = "socialMediaHeader"> 

     <div id = "socialMediaIcons"> 
      <a href = "http://twitter.com/kh_days_hd"><img class = "socialMediaIcon" src = "twitter_icon.png"></a> 

      <a href = "https://www.youtube.com/channel/UC4mVq6c8YpYOuiTwuzejgDw"><img class = "socialMediaIcon" src = "youtube_icon.png"></a> 
     </div> 

    </div> 

</body> 
</html>

這裏是CSS：

* { 
    margin: 0; 
    padding: 0; 
} 

#socialMediaHeader { 
    background-color: black; 
} 

.socialMediaIcon { 
    margin: 10px; 
} 

#socialMediaIcons { 
    position: absolute; 
    right: 0px; 
} 

#socialMediaIcons::after { 
    content : ""; 
    display : block; 
    clear : both; 
}

編輯：此代碼是在我正在進行的工作試圖解決這個問題，忽略任何愚蠢的錯誤

來源

2016-09-10 Brady W

把它放在小提琴手上。所以我們可以看到你錯在哪裏。乾杯! –

給你的socialmediaheader寬度爲100％，X的高度和相對位置

#socialMediaHeader { 
    background-color: black; 
    width: 100%; //optional but if you change the right: of you icon your header would still fill the whole page width 
    height: 50px; // or any other height 
    position: relative; 
}

工作小提琴：https://jsfiddle.net/6h21kncg/4/

對不起這是一個有點難看，帶我，直到早餐是在讀你的問題正確的 - 請原諒我，但我現在對我的電話......

來源

2016-09-10 07:18:44 toerd

你正在使用位置：絕對，這將socialMediaIcons div從socialMediaHeader中取出，因此這個div沒有任何內容。你需要給它一個高度。

來源

2016-09-10 07:36:56

將絕對定位的元素從流中移除。他們的身高，填充或邊距不會以任何方式影響他們的父母。

要使您的父元素#socialMediaHeader可見，您需要定義它的高度。

#socialMediaHeader { 
    background-color: black; 
    position: relative; 
    height: 50px; 
}

另外，請注意position:relative。絕對定位總是尋找最近的定位祖先。這確保您的圖標始終在#socialMediaHeader之內。

來源

2016-09-10 07:37:25 AA2992

但我希望頁眉是頁面的百分比高度，當我嘗試我遇到同樣的問題時 –

百分比高度僅適用於在父級上指定高度的情況。在你的情況下，如果你添加'html，body {height：100％}'。你應該能夠在標題上設置一個百分比。 – AA2992

下面是一個示例，說明如何在頭上使用百分比高度。 https://jsfiddle.net/L1m292jz/1/ – AA2992

使標題與右側對齊的圖標HTML/CSS

回答

相關問題