Question

问题：

我将导航栏图像的边距值设置为0px 8.14％0px 8.14％
现在，我看到图像比我的身体高太多了屏幕上，它会在右侧显示一个滚动条，并且由于某种原因最后一个导航到下一行。
当我尝试将边距值更改为0px 8％0px 8％时，它会保存并上传，但是当我检查检查菜单中的值（是所谓的吗？）仍然是旧值。

幻灯片中的图像只是用于测试功能的随机图像，而不是我正在使用的图像。另外，您可以告诉我我做错了什么吗？

我想我必须显示代码。

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>

更改图像的边距值没有生效

1 个答案: