添加分页左侧时，标题中的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>