右のアイコンが整列したヘッダーを作成する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; 
}

EDIT：このコードは、問題を解決しようとする私の進行中の作業で、任意の愚かなエラーを無視します

出典

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

ますposition：absoluteを使用しています。これはsocialMediaHeaderのsocialMediaIcons divを取り出し、この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

答えて

関連する問題