Question

我的标题徽标下面有六个水平排列，下方有一个图像。我使用相对属性定位这些链接，并希望它们作为菜单栏工作，并希望它们应用于我的所有页面以实现理想的导航。所以我只是将链接复制并粘贴到我的其他页面的html代码中。好吧，在我的其他页面上，我不一定要在我的链接下面直接显示图像，但是当我删除它时，我的链接位置会发生巨大变化。这是我网站的GIF和我的问题：http://i.imgur.com/KiDXPHb.gif

这是我＆＃34;关于＆＃34;的身体。页面HTML代码：

<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>

这是我的链接定位CSS：

#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}

如果有人可以提供帮助，那么非常感谢你。我真的很想继续为我的其他人工作编码，这是唯一的障碍。

Answer 1

删除所有相对定位的东西，然后执行此操作：

div {
    text-align: center;
}

将它们分开使用保证金：

a {
    margin: 10px;
}

也可以尝试下次搜索。我也会查看http://learnlayout.com/

Answer 2

请参阅演示： 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;}

代码段

＆＃13;

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

＆＃13;

<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>

＆＃13;

网站布局很难

2 个答案: