画像が正しくナビゲートされていない

Question

divタグを使用して、画像をナビゲーションバーに挿入しました。画像のサイズは、値がパーセンテージの場合のみ変更されます。幅のみがサイズを変更しますが、縦横比は同じなので、幅と高さを別々に編集することはできません。これをどうやって解決するのですか？ああ、誰かがナビバーがトップを完全に覆うようにする方法を教えてもらえますか？ THX

ul { 
 
    list-style-type: none; 
 
    margin: 0px auto; 
 
    background-color: #f1f1f1; 
 
    position: fixed; 
 
    width: 95%; 
 
    height: 10%; 
 
    text-align: center; 
 
    border: 3px solid #999 
 
} 
 

 
.nav img { 
 
    float: left; 
 
    margin-right: 0; 
 
    padding: 0; 
 
    width: 17.9%; 
 
    height: 0.05% 
 
} 
 

 
li { 
 
    display: inline-block; 
 
    margin: 2% 
 
} 
 

 
li a { 
 
    font-size: 160%; 
 
    color: #000; 
 
    background-color: #81DAF5; 
 
    text-decoration: none 
 
} 
 

 
li a:hover { 
 
    color: blue; 
 
    background-color: #FFFFFF; 
 
    transition: background 0.3s linear 
 
}

<ul> 
 
    <div class="nav"> 
 
    <a href="index.html"> 
 
     <img src="http://placehold.it/100x100" alt="Logo"> 
 
    </a> 
 
    </div> 
 
    <li><a href="#">Page</a></li> 
 
</ul>

Answer 1

はあなたがli最初にそれをラップすることなく、ulでdivを望んでいないこのhttps://jsfiddle.net/28kL2hvu/1/

を試してみてください。 幅と高さのパーセンテージを使用する場合は、親コンテナの幅と高さを特定の値に設定する必要があります。そのため、heightとwidthの子divのパーセント値を使用すると、親コンテナの指定された値にしか成長しません。

<div class="parent"> 
    <div class="nav"> 
    <a href="index.html"> 
     <img src="navpic.png" alt="Logo"> 
    </a> 
    </div> 
    <div><a href="#">Page</a></div> 
</div> 

.parent { 
    list-style-type: none; 
    margin: 0px auto; 
    background-color: #f1f1f1; 
    position: fixed; 
    width: 500px; 
    height: 50px; 
    text-align: center; 
    border: 3px solid #999 
} 

.nav img { 
    float: left; 
    margin-right: 0; 
    padding: 0; 
    width: 25px; 
    height: 10px 
} 

li { 
    display: inline-block; 
    margin: 2% 
} 

li a { 
    font-size: 160%; 
    color: #000; 
    background-color: #81DAF5; 
    text-decoration: none 
} 

li a:hover { 
    color: blue; 
    background-color: #FFFFFF; 
    transition: background 0.3s linear 
} 

Answer 2

問題は、あなたが%ul a fixed heightに設定していることだった子divの高さに％値を使用できるように、それはpx-elsにauto heightまたは高さでなければなりません。今

ul { 
 
    list-style-type: none; 
 
    margin: 0px auto; 
 
    background-color: #f1f1f1; 
 
    position: fixed; 
 
    width: 95%; 
 
    height: auto; 
 
    text-align: center; 
 
    border: 3px solid #999; 
 
    display: flex; 
 
} 
 
.nav img { 
 
    margin-right: 0; 
 
    padding: 0; 
 
    width: 50px; 
 
    height:70px; 
 
} 
 
li { 
 
    display: inline-block; 
 
    margin: 2% 
 
} 
 
li a { 
 
    font-size: 160%; 
 
    color: #000; 
 
    background-color: #81DAF5; 
 
    text-decoration: none 
 
} 
 
li a:hover { 
 
    color: blue; 
 
    background-color: #FFFFFF; 
 
    transition: background 0.3s linear 
 
}

<ul> 
 
    <div class="nav"> 
 
    <a href="index.html"> 
 
     <img src="http://placehold.it/100x100" alt="Logo"> 
 
    </a> 
 
    </div> 
 
    <li><a href="#">Page</a></li> 
 
</ul>

。 HTMLの形式が正しくありません。 ％のULタグの中にあなたが

<ul> 
    <div class="nav"> 
    <a href="index.html"> 
     <img src="http://placehold.it/100x100" alt="Logo"> 
    </a> 
    </div> 
    <li><a href="#">Page</a></li> 
</ul> 

のみ％李タグを持っている必要があります％のULに固定の高さを設定することが問題である理由コードの上の平和は

<div class="logo"> 
    <a href="index.html"> 
     <img src="http://placehold.it/100x100" alt="Logo"> 
    </a> 
    </div> 
<ul class="navigation"> 
    <li><a href="#">Page</a></li> 
</ul>