html - 更改图像的边距值未生效

Question

问题:

• 我让导航栏图片的边距值为 0px 8.14% 0px 8.14%
• 现在我发现图片比我高 屏幕上，它在右侧制作了一个滚动条，出于某种原因 最后导航转到下一行。
• 当我尝试将边距值更改为 0px 8% 0px 8% 时，它可以正常保存和上传，但是当 我检查检查菜单中的值(这就是所谓的吗？) 它仍然是旧值。

幻灯片中的图像只是用于测试功能的随机图像，而不是我正在使用的图像。 此外，不要做邪恶的 Stack 事情，你能告诉我我做错了什么吗？

我想我必须展示我的代码。

HTML:

<div id="nav">
    <a href=index.html>    
    <img class="navimg" id="homeimg" src=Images/Home.png alt="Home"></a>
<a href=Webpages/about.html>
    <img class="navimg" id="aboutimg" src=Images/About.png alt="About"></a>
<a href=Webpages/contact.html>
    <img class="navimg" id="contactimg" src=Images/Contact.png alt="Contact"></a>
<a href=Webpages/extlinks.html>
    <img class="navimg" id="extimg" src=Images/External.png alt="External"></a>
    </div>

CSS:

body {
    width: 100%;
    height: 100%;
    margin: 0%;
}
#nav {
    width: 100%;
    min-height: 6%;
    max-height: 6%;
    background-color: #3C3C8D;
.navimg {
    height:100%;
    float:left;
    margin: 0px 8% 0px 8%;
    padding: 0px 0px 0px 0px;
}

完整代码位于 http://jsfiddle.net/1s3byt56/我的网站是http://weeklyrandomthing.000webhostapp.com/ 非常感谢

编辑: 我正在使用 FileZilla 上传到 FTP 服务器 (files.000webhost.com:21) 和 Notepad++ 来编辑代码。当我上传时，所有传输都正常，但实际网站似乎没有更新，即使随着时间的推移也是如此。我应该问另一个问题来解决这个问题吗？

编辑 2: 是的，我现在准备删除这个问题，但我做不到。这里列出的问题甚至不是问题。我的网站只是没有更新。和平。

Answer 1

尝试使用 flexbox 并为 #nav 定义高度。这个地方的百分比值使结果不可预测。

body {
    width: 100%;
    height: 100%;
    margin: 0%;
}
#nav {
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 10em;
    background-color: #3C3C8D;
}
#nav a {
  display: flex;
  justify-content: center;
}
.navimg {
    display:block;
    height:100%;
    width: auto;
    margin: 0 auto;
}

<div id="nav">
    <a href=index.html>    
        <img class="navimg" id="homeimg" src="https://source.unsplash.com/400x300/?nature" alt="Home">
    </a>
    <a href=Webpages/about.html>
        <img class="navimg" id="aboutimg" src="https://source.unsplash.com/400x300/?urban" alt="About">
    </a>
    <a href=Webpages/contact.html>
        <img class="navimg" id="contactimg" src="https://source.unsplash.com/400x300/?animals" alt="Contact">
    </a>
    <a href=Webpages/extlinks.html>
        <img class="navimg" id="extimg" src="https://source.unsplash.com/400x3007?sea" alt="External">
    </a>
</div>