添加分頁左側時，標題中的CSS-Logo消失

Question

我的標識圖像作爲左側標題中的主頁鏈接以及右側的其他導航鏈接。但是，將「填充左側」屬性添加到屬性的內聯CSS時，徽標消失。在這裏輸入代碼

奇怪的是，相同的代碼（帶有填充左側屬性）對於同一網站的其他頁面的標題工作正常。

所以，在這裏，S從當左填充爲1％的快照： left-padding is 1%

從當左填充爲3％快照： left-padding is 3%

如果你仔細觀察，圖像的右邊界水平地固定在某個點上。所以當我增加左側填充時，圖像從左邊壓縮並變得更小。

我期待的是圖像被移動到左邊，完全沒有被壓縮。

下面的代碼：

#header { 
 
     width: 100%; 
 
     height: 10%; 
 
     color: white; 
 
     background-color: #0066CC; 
 
     position: fixed; 
 
     top: 0; 
 
     left: 0; 
 
    }

<div id="header"> 
 

 
    <a href="homepage.html"><img id="logo" src="logo.png" alt="HZ Innovations" style = "float: left; width: 5%; height: 100%; padding-left: 10%;"/></a> 
 
    <div id = "headLinks" style="float: right; position: absolute; bottom: 10%; right: 25%; "> 
 
     <a href="about.html" >About Hz</a>&nbsp; &nbsp;&nbsp; &nbsp; 
 
     <a href="technology.html">The Technology</a>&nbsp; &nbsp;&nbsp; &nbsp; 
 
     <a href="contactUs.html" >Contact Us</a> 
 
    </div> 
 
</div>

Answer 1

答案在這裏，我不知道爲什麼它不工作之前，但你總是應該正確地寫你的HTML！

#header { 
 
    width: 100%; 
 
    height: 10%; 
 
    color: white; 
 
    background-color: #0066CC; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
#logo { 
 
    width: 5%; 
 
    height: 100%;f 
 
    float: left; 
 
    padding-left: 100px; 
 
} 
 

 
#headLinks { 
 
    float: right; 
 
    position: absolute; 
 
    bottom: 10%; 
 
    right: 25%; 
 
} 
 

 
#headLinks > a { 
 
    display: block; 
 
    margin-right: 10px; 
 
    float: left; 
 
}

<div id="header"> 
 
    <a href="homepage.html"> 
 
     <img id="logo" src="logo.png" alt="Logo"/> 
 
    </a> 
 
    <div id = "headLinks"> 
 
     <a href="about.html">About </a> 
 
     <a href="technology.html">The Technology</a> 
 
     <a href="contactUs.html">Contact Us</a> 
 
    </div> 
 
</div>