添加paading-left

Question

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

奇怪的是，相同的代码（使用padding-left属性）适用于同一网站的其他页面的标题。

所以，这里是左边填充为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>