使用CSS和HTML缺少链接

在第二张图片的下方有一个链接，但现在它神秘地消失了 你能看出哪里出了问题吗

我在下面得到了一个建议，我已经看到了，链接隐藏在图片下面。如何向下移动链接

我真的希望照片的位置与试验现场一样

我编辑了这个问题，删除了与我公众视线的链接，因为巴特杜德建议避免这种链接

     <nav class="navigation">
                 <div class="links">
                     <a href="http://www.student.bth.se/~asfo13/htmlphp/projectBMO/home.php">
                       <img class="krans" src=parlkrans_handslag.jpg alt="Image on pärlkrans">
                     </a>
                    <a href=http://www.student.bth.se/~asfo13/htmlphp/projectBMO/home.php>Begravningsmuseum Online</a>
                 </div>
                 <div class="links">
                     <a href="http://www.student.bth.se/~asfo13/oophp/MovieProject/Embla/webroot/home.php?p=home">
                       <img class="woods" src="woods.jpg" alt="Image from the woods">
                     </a>
                     <a href='http://www.student.bth.se/~asfo13/oophp/MovieProject/Embla/webroot/home.php?p=home'>Movieproject</a>
                 </div>
            </nav>


        .links {

          float:left;
          margin-left:10px;
          margin-right:10px;
          padding-left:10px;
          padding-right:10px;
          margin-bottom: 14px;
          background-color: #ffffff;
          width:260px; 
        }
        .krans{

            width: 160px;
            margin-left:10px;
            margin-right:10px;
            padding-left:10px;
            padding-right:10px;
            margin-bottom: 10px;
        }
        .woods{

            width: 314px;
            position: absolute;
            left: 250px;
            margin-left:10px;

        }

    .woods{
        width: 314px;
        /*position: absolute;*/
        left: 250px;
        /*margin-left:10px;*/
        margin-right:10px;
        /*padding-left:10px;*/
        padding-right:10px;

    }

.woods{
    width: 314px;
    /*position: absolute;*/
    left: 250px;
    /*margin-left:10px;*/
    margin-right:10px;
    /*padding-left:10px;*/
    padding-right:10px;

}

.链接{
浮动：左；
左边距：10px；
右边距：10px；
左侧填充：10px；
右边填充：10px；
边缘底部：14px；
背景色：#ffffff；
宽度：260px；
}
克兰斯先生{
宽度：160px；
左边距：10px；
右边距：10px；
左侧填充：10px；
右边填充：10px；
边缘底部：10px；
}
伍兹先生{
宽度：314px；
位置：绝对位置；
左：250px；
左边距：10px；
}
伍兹先生{
宽度：314px；
/*位置：绝对位置*/
左：250px；
/*左边距：10px*/
右边距：10px；
/*左侧填充：10px*/
右边填充：10px；
}
伍兹先生{
宽度：314px；
/*位置：绝对位置*/
左：250px；
/*左边距：10px*/
右边距：10px；
/*左侧填充：10px*/
右边填充：10px；
}

您的woods.jpg图像具有

位置：绝对

，因此链接实际上位于图像本身下方。只需移除绝对位置并调整边距（同时从

.wood

元素中移除

左侧填充

和

左侧边距

）

从截图中可以看到，链接电影项目（在左侧突出显示）位于照片下方

---

---

小心使用position absolute:detär ingen dans pårosor:）

请从此类中删除以下属性。 伍兹先生{ 左边距：10px； 右边距：10px； 左侧填充：10px； 右边填充：10px； 位置：绝对位置； }

希望这能解决您的问题。：）

我在CSS类woodslink中使用链接的绝对定位解决了这个问题

.woodslink{
    position: absolute;
    left: 370px;
    top: 350px;

}
.links {
  float:left;
  margin-left:10px;
  margin-right:10px;
  padding-left:10px;
  padding-right:10px;
  margin-bottom: 14px;
  background-color: #ffffff;
  width:260px; 
}

<div class="links">
                 <a href="http://www.student.bth.se/~asfo13/oophp/MovieProject/Embla/webroot/home.php?p=home"><img class="woods" src="woods.jpg" alt="Image from the woods"></a>
                 <a class="woodslink" href='http://www.student.bth.se/~asfo13/oophp/MovieProject/Embla/webroot/home.php?p=home'>Movieproject</a>
             </div>

.woodslink{
位置：绝对位置；
左：370px；
顶部：350px；
}
.链接{
浮动：左；
左边距：10px；
右边距：10px；
左侧填充：10px；
右边填充：10px；
边缘底部：14px；
背景色：#ffffff；
宽度：260px；
}

您的代码中没有类似于

www.rosepetals.se

？它是如何丢失的？这就是答案^^^请不要发布实时链接，因为这会使您的问题在回答后立即过时，这不是SO的目标。使用任何浏览器开发工具进行简单的检查都会显示链接的实际位置（隐藏在图像下）。基本上你的问题是非常糟糕的HTML+CSS结构，所以你最好修复整个问题，否则你将来会有很多其他问题。这甚至没有提到浏览器之间的差异…你缺少

href

属性的

“

。@rosepatel，你试过我的答案吗？.woods{width:314px；/*position:absolute；*/left:250px；/*margin left:10px；*/margin right:10px；/*padding left:10px；}我按照你的建议删除了它，但现在它看起来不对劲www.rosepetals.se我真的希望图片有这样的位置..正如我在上面写的，你可以很容易地用边距进行调整：例如，尝试给第二个

.links

元素留一个负边距。或者给它位置：relative，然后用上/左pr将该元素移动到你想要的任何地方操作链接在图片下方，也许我应该试试margin top？我试过了。我最近打开了这个帐户，但没有图片权限，所以我无法显示图片。这不是正确的选择，但我会继续尝试。我解决了它，但我无法发布它，因为新帐户的时间限制为8小时。但我今晚会展示它。我试过了o投票支持你，因为你的回答引导我前进。但我真的不能，因为你必须有15个声誉才能投票。这确实有效，但我注意到这不是一个最佳解决方案。这种绝对定位的使用不容易保持。我将尝试找到更好的解决方案。