放置一些图片后无法点击我的链接答案

【问题标题】：Can't click on my links after placing some images放置一些图片后无法点击我的链接
【发布时间】：2016-01-13 06:37:55
【问题描述】：

我是 html 和 css 新手，所以我有一个问题。

我在搞乱一些东西，但是在我的页面上放置了一些图片后，我无法再点击我的链接了。

HTML：

<!DOCTYPE html>
<html>
 <head>
   <link rel="stylesheet" href="css/style.css" media="screen" title="no title" charset="utf-8">
   <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   <title>Rijschool Houben</title>
 </head>
 <body>
   <div id="header"></div>
    <div id="header-pic"><img src="image/test.png"></div>
    <p>
     <div id="nav-bar">
         <ul>
           <li>|<a href="http//www.google.nl">Home</a>|</li>
           <li><a href="contact">Info</a>|</li>
           <li><a href="portfolio">Prijzen</a>|</li>
           <li><a href="over ons">Acties</a>|</li>
           <li><a href="over ons">Machtiging</a>|</li>
           <li><a href="over ons">Theorie</a>|</li>
           <li><a href="over ons">Begeleid rijden</a>|</li>
           <li><a href="over ons">Bromfiets</a>|</li>
           <li><a href="over ons">Contact</a>|</li>
         </ul>
     </div>
   </p>
   <p>
     <div id="icon-main">
         <i class="fa fa-mobile" style="font-size:28px;"></i><a>046-4524501</a><br />
         <i class="fa fa-paste" style="font-size:18px;"></i><a>raymond@rijschoolhouben.nl</a><br />
         <i class="fa fa-facebook-official" style="font-size:20px;"></i><a>Volg ons op Facebook!</a>
     </div>
   </p>
   <p>
    <div id="img-1">
      <img src="image/1.jpg" alt="Scooter" width="330px" height="400px"/>
    </div>
    <div id="img-2">
      <img src="image/2.jpg" alt="Geslaagde 1" width="337px" height="400px"/>
    </div>
    <div id="img-3">
      <img src="image/3.jpg" alt="Geslaagde 2" width="337px" height="400px"/>
    </div>
    <div id="img-4">
      <img src="image/4.jpg" alt="Geslaagde 3" width="337px" height="400px" />
    </div>
    <div id="img-5">
      <img src="image/5.jpg" alt="Geslaagde 4" width="337px" height="400px" />
    </div>
    <div id="img-6">
      <img src="image/6.jpg" alt="Geslaagde 5" width="337px" height="400px" />
    </div>
  </p>
 </body>
</html>

CSS：

div#header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-color: white;
}

div#header-pic{
  position: fixed;
  height: 50px;
  left: 500px;
}
div#nav-bar{
  position: fixed;
  padding-top: 130px;
  left: 0;
  width: 100%;
  white-space: nowrap;
}

div#nav-bar ul{
  list-style: none;
  text-align: center;
  background-color: #323232;
  padding: 10px 0;
}

div#nav-bar li{
  display: inline;
}

div#nav-bar li a{
  text-decoration: none;
  color: white;
  padding: 14px 16px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}

div#icon-main{
  position: fixed;
  color: #323232;
  padding: 10px;
}

div#icon-main i{
  padding: 5px;
}

div#icon-main a{
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}

div#img-1 {
  position: fixed;
  left: 0;
  padding-top: 184px;
  width: 100%;
}

div#img-2 {
  position: fixed;
  padding-top: 184px;
  padding-left: 255px;
}

div#img-3 {
  position: fixed;
  padding-top: 184px;
  padding-left: 915px;
}

div#img-4 {
  position: fixed;
  padding-top: 184px;
  padding-left: 585px;
}

div#img-5{
  position: fixed;
  padding-top: 184px;
  padding-left: 1245px;
}

div#img-6 {
  position: fixed;
  padding-top: 184px;
  padding-left: 1575px;
}

我知道代码不好，但我希望有人能帮助我！这是fiddle。

-瑞恩

【问题讨论】：

请将 HTML 和 CSS 添加到您的问题中，在 Stackoverflow 上不赞成使用外部主机，因为链接可能会中断。

标签： html css hyperlink

【解决方案1】：

我查看了您的外部代码。请在 Stack Overflow 中将您的 HTML 和 CSS 添加到您的问题中。

在外部 HTML 中，您有以下代码：

<a>046-4524501</a>

这不能用作链接。

你有这个代码

<a href="http//www.google.nl">Home</a>

效果如你所愿。

改变这一行：

<a>046-4524501</a>

到

<a href="http//www.example.com">046-4524501</a>

href="你希望链接去哪里"。

这都是关于“href”的价值

【讨论】：

【解决方案2】：

我确实注意到您正在执行非响应式 html，这意味着它不适合移动设备，或者在较小的浏览器窗口中看起来相同。

你的代码很乱，但你做得很好。

首先将您放入标题中的所有内容包装在标题 div 中
由于位置：固定，图像会在导航上方浮动
删除 div 之间的所有空 <p></p>
在图片上使用浮动，宽度为 100%，并将它们包装在容器/div 中

如果你需要我，我可以看看我是否可以重做你所有的 html 和 CSS，但我想你会更好地学习自己尝试一下。

您可以随时查看HTML5 boilerplate 并使用它们来指导您如何构建好的代码。

【讨论】：

【解决方案3】：

我看到您正在尝试创建一行图像。您为什么不使用更灵活（响应更灵敏）的列表结构，而不是使用 DIV 系统？

然后您可以使用float: 将它们排成一排，并使用基本 CSS 来赋予它们大小。这些图像将被指定为这些li 元素的背景（更好的做法）。

像这样：http://codepen.io/Attrexx/pen/KVvwXP

【讨论】：

我建议将其中一个答案标记为最佳答案，因此如果是这种情况，请解决您的问题。

【解决方案4】：

您正在使用 padding 放置包含图像的 div。这就是您不能在菜单中使用链接的原因。 div 块覆盖您的链接。

尝试使用类似的东西：

selector {
   position: absolute; /* or `fixed` like in your css; see below*/
   top: 100px; /* pixels from the top */
   left: 100px; /* pixels from the left */
   /* you can also use `bottom` and `right` */
}

例如：

div#img-3 { /* or just `#img-3`; see below */
  position: absolute;
  top: 184px;
  left: 915px;
}

查看此w3 schools article 了解有关定位的更多信息。

与问题无关：

如果你使用 CSS 的 id 选择器（#），我建议不要使用 element 选择器（例如div）。因此，不要尝试使用div#img-3，而是仅使用#img-3。
尽量避免使用 id 选择器。您可以使用 class 规则，并且很高兴在一段时间后它们会为您节省大量工作。
如果您使用的是 HTML5，请尝试使用 semantic elements。
避免在不需要时使用fixed 位置（您的页面就是此类页面的示例）。
Paragraphs (p) 不应以与 div 相同的方式使用。这可能会导致语义网站的不良习惯。
不要使用定位 (position)，而是尝试使用 float 或不同的 display 类型（例如 inline-block）。仅在真正需要时使用。
了解HTML Responsive Web。

【讨论】：