为什么当我删除图像时我的链接位置会发生巨大变化？ [关闭]答案

【问题标题】：Why are my links' positions drastically altered when I remove an image? [closed]为什么当我删除图像时我的链接位置会发生巨大变化？ [关闭]
【发布时间】：2019-11-27 11:21:56
【问题描述】：

我的标题徽标下方水平排列了六个链接，下方有一个图像。我使用 relative 属性定位这些链接，并希望它们用作菜单栏，并希望它们应用于我的所有页面以实现理想的导航。所以我只是简单地将链接复制并粘贴到我的其他页面的 HTML 代码中。

嗯，在我的其他页面上，我不一定想要在我的链接下方直接显示图像，但是当我删除它时，我的链接位置会发生巨大变化。这是我的网站和我的问题的 GIF：

这是我的“关于”页面的正文：

#about {
  position: relative;
  bottom: 315px;
  left: -112px;
}

#news {
  position: relative;
  bottom: 315px;
  left: -67px;
}

#store {
  position: relative;
  bottom: 315px;
  left: -22px
}

#music {
  position: relative;
  bottom: 315px;
  right: -22px
}

#connect {
  position: relative;
  bottom: 315px;
  right: -67px
}

#submit {
  position: relative;
  bottom: 315px;
  right: -112px
}

<body>
  <hr id="line1">
  <div class="wrapper">
    <a href="gbwebsite.html"><img id="gblogo" src="images/GB.png" alt="good boy logo" width="128" height="128"></a>
  </div>

  <div id="font" class="wrapper">
    <a id="about" href="about.html" class="stroke">
      <font>ABOUT</a>
    </font>
    <a id="news" href="news.html" class="stroke">
      <font>NEWS</a>
    </font>
    <a id="store" href="store.html" class="stroke">
      <font>STORE</a>
    </font>
    <a id="music" href="music.html" class="stroke">
      <font>MUSIC</a>
    </font>
    <a id="connect" href="connect.html" class="stroke">
      <font>CONNECT</a>
    </font>
    <a id="submit" href="submit.html" class="stroke">
      <font>SUBMIT</a>
    </font>
  </div>

【问题讨论】：

您的 HTML 不正确。除此之外，您应该为此使用列表！ w3schools.com/css/css_navbar.asp
HTML @Timo002 有什么问题？我也将其更改为列表，谢谢您向我展示正确的方法。
<font> 标签在 HTML5 中已弃用
所以我应该用列表格式重新格式化它？你知道这是否也能解决我的链接移动问题吗？我对此很陌生，对于业余的错误，我深表歉意。 @Wachtler
我觉得这个问题应该结束了:(

标签： html css position css-position

【解决方案1】：

查看演示：DEMO

你的html结构错误，你没有按正确的顺序关闭<a>和<font>标签。
<font> 标签已弃用。
使用<ul><li> 结构创建菜单始终是最佳实践，这样做可以避免所有不必要的定位。

请在下面找到代码：

HTML：

<hr id="line1"/>

<div class="wrapper">
    <a href="gbwebsite.html"><img id="gblogo" src="images/GB.png" alt="good boy logo" width="128" height="128"/></a>
</div>      

<div id="font" class="wrapper">
  <ul>
    <li><a id="about" href="about.html" class="stroke">ABOUT</a></li>    
    <li><a id="news" href="news.html" class="stroke">NEWS</a></li>    
    <li><a id="store" href="store.html" class="stroke">STORE</a></li>    
    <li><a id="music" href="music.html" class="stroke">MUSIC</a></li>    
    <li><a id="connect" href="connect.html" class="stroke">CONNECT</a></li>    
    <li><a id="submit" href="submit.html" class="stroke">SUBMIT</a></li>
  </ul>
</div>

CSS：

ul li{list-style:none;}
.wrapper ul li{display:inline;}
.wrapper{text-align:center;}
.wrapper a{padding:5px;}

代码 sn-p

  ul li{list-style:none;}
    .wrapper ul li{display:inline;}
    .wrapper{text-align:center;}
    .wrapper a{padding:5px;}

<hr id="line1"/>
    
    <div class="wrapper">
        <a href="gbwebsite.html"><img id="gblogo" src="images/GB.png" alt="good boy logo" width="128" height="128"/></a>
    </div>      
    
    <div id="font" class="wrapper">
      <ul>
        <li><a id="about" href="about.html" class="stroke">ABOUT</a></li>    
        <li><a id="news" href="news.html" class="stroke">NEWS</a></li>    
        <li><a id="store" href="store.html" class="stroke">STORE</a></li>    
        <li><a id="music" href="music.html" class="stroke">MUSIC</a></li>    
        <li><a id="connect" href="connect.html" class="stroke">CONNECT</a></li>    
        <li><a id="submit" href="submit.html" class="stroke">SUBMIT</a></li>
      </ul>
    </div>

【讨论】：

谢谢，我确实按照你说的做了，但它最终给我的网站带来了更多问题。我想我只是去寻找一些关于如何正确定位元素等的教程，然后重建我的网站。真是太痛苦了。
在小提琴中提供问题，我可以尝试帮助您解决它并解释如何继续。
这里：jsfiddle.net/kj44Lcdr/ 非常感谢您的帮助（（：我真的很感激。
jsfiddle.net/kj44Lcdr/10 这是您要找的吗？
尝试在 codecademy.com 或 udemy.com 上学习如何创建网站的教程。访问最适合学习的 w3schools.com。

【解决方案2】：

删除所有相对定位的东西，然后这样做：

div {
    text-align: center;
}

使用边距将它们隔开：

a {
    margin: 10px;
}

下次也尝试搜索一下。我也想看看http://learnlayout.com/

【讨论】：