【问题标题】:Changing margin values of images aren't taking effect更改图像的边距值没有生效
【发布时间】:2018-08-11 06:54:16
【问题描述】:

问题:

  • 我让导航栏图像的边距值为 0px 8.14% 0px 8.14%
  • 现在我发现当图像高于我的 屏幕,它会在右侧制作一个滚动条,并且由于某种原因 last navimg 转到下一行。
  • 当我尝试将边距值更改为 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: 是的,我现在准备删除这个问题,但我不能。这里列出的问题甚至不是问题。我的网站只是没有更新。和平相处。

【问题讨论】:

  • instead of doing evil Stack stuff, 是什么意思?
  • @TemaniAfif 标记为垃圾邮件或重复或信息不足或该社区臭名昭著的任何其他事情。
  • 通过说你会吸引那些东西..你认为我们这样做很有趣吗?如果您的问题是重复的,我会将其标记为重复,如果它太宽泛,我也会这样做......这不是邪恶的,这些是规则
  • 顺便说一句,您可能会看到,在您的代码中,您使用的是图像的相对路径,因此您的代码根本无法正常工作,您需要考虑对其进行调整以使其正常工作并创建一个 sn- p 在这里,不要链接到外部网站。 [这些是您需要遵守的一些规则,以避免邪恶的东西]
  • 编辑 1 听起来像缓存或服务器配置。你应该问另一个问题。确保告诉谁是主机/服务器配置是什么。

标签: html css margin


【解决方案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>

【讨论】:

  • 感谢您的回复。我确信它会起作用,但我认为改变并没有发生。检查我的编辑。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-03-11
  • 2018-09-03
  • 2013-05-27
  • 1970-01-01
  • 2015-03-01
相关资源
最近更新 更多