ロゴはヘッダーに表示されません

現在、私の友人用のウェブサイトを作成していますが、問題が発生しました。非常に刺激的なもの。私はヘッダー（ヘッダーのIDを持つdiv）とその内部にulを持っています。 <img src="filename.extension" id="logo">を私のヘッダーdivに追加しましたが、実際のヘッダーの下に表示されます。私はフロートした：右;ヘッダーの内側に表示されると思っていますが、ヘッダーには表示されません。そして、ulの周りに1pxのボーダーを追加して、それが多くのスペースを占めるかどうかを確認しましたが、ロゴが収まるのに十分なスペースが残っていました。ここでロゴはヘッダーに表示されません

は私のコードです：（HTML）

<!DOCTYPE html> 
<html> 
    <head> 
    <title></title> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    </head> 
    <body> 
    <div id="header"> 
     <div id="headercon"> 
     <ul> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Vote</a></li> 
      <li><a href="#">Rules</a></li> 
      <li><a href="#">Discord</a></li> 
      <li><a href="#">Status</a></li> 
     </ul> 
     </div> 
     <img id="logo" src="vglogo.png"> 
    </div> 
    </body> 
</html>

（CSS）：

#header { 
    width: 100%; 
    height: 60px; 
    position: absolute; 
    top: 0; 
    background-color: #ededed; 
    border-bottom: 5px solid #dddddd; 
} 

body { 
    margin: 0; 
    padding: 0; 
} 

#header > #headercon > ul { 
    display: flex; 
    line-height: 10px; 
    font-size: 25px; 
} 

#headercon { 
    display: block; 
    width: 60%; 
    height: auto; 
    margin-right: 500px; 
    margin-left: 100px; 
} 

li { 
    list-style-type: none; 
} 

a { 
    text-decoration: none; 
    color: black; 
    padding: 0 10px; 
} 

#logo { 
    float: right; 
}

出典

2017-10-23 Christoffer Hjärtström

？ –

私のロゴが表示されていますが、私はそれを期待していませんでした –

それ以外は同じフォルダにあります –

あなたはこのようにそれを期待できますか？フォルダがあなたのロゴである

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#header { 
 
    width: 100%; 
 
    height: 60px; 
 
    position: fixed; 
 
    top: 0; 
 
    left:0; 
 
    background-color: #ededed; 
 
    border-bottom: 5px solid #dddddd; 
 
} 
 

 
#header>ul>li { 
 
    float:left; 
 
    list-style-type: none; 
 
} 
 

 
#header>ul>li>a { 
 
    font-size: 25px; 
 
    text-decoration: none; 
 
    color: black; 
 
    padding: 0 10px; 
 
} 
 
.logo { 
 
    float: right!important; 
 
    right:40px; 
 
    position: relative; 
 
    top: -10px; 
 
} 
 
.logo img{ 
 
    height:50px 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title></title> 
 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
    </head> 
 
    <body> 
 
    <div id="header"> 
 
     <ul> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">About</a></li> 
 
     <li><a href="#">Vote</a></li> 
 
     <li><a href="#">Rules</a></li> 
 
     <li><a href="#">Discord</a></li> 
 
     <li><a href="#">Status</a></li> 
 
     <li class="logo"><img id="logo" src="https://static1.squarespace.com/static/579d30036a49638cd66ee855/57a69cadb3db2b8908f27da1/57a69d90e6f2e1f140d7bcfa/1470542795812/Intel_logo.png"></li> 
 
     </ul> 
 
    </div> 
 
    </body> 
 
</html>

出典

2017-10-23 01:56:42

これはまさに私が探していたものです！ありがとうございました！あなたはあなたが何を変えたのか、私が間違ったことを説明してくれましたか？本当に有益でしょうか？ –

最後のliのimgを削除し、 'div。＃headercon、display：flex、 line-height：10px;'を追加して、CSSの '.logo { float：right！important; 権利：40px; 位置：相対; top：-10px; } .logo img { 身長：50px }、#header> ul> li> a' –

ロゴはヘッダーに表示されません

答えて

関連する問題