html - 添加 padding-left 时标题中的 CSS-Logo 消失

Question

我在左侧的标题中将 Logo 图像作为指向主页的链接，以及右侧的其他导航链接。但是，当我将“padding-left”属性添加到属性的内联 CSS 时， Logo 消失了。在这里输入代码

奇怪的是，相同的代码(带有 padding-left 属性)可以很好地用于同一网站的其他页面的标题。

所以，这是左边距为 1% 时的快照: left-padding is 1%

left-padding 为 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>