Question

在第二张照片下面有一个链接，但现在它神秘地失踪了 http://rosepetals.se.temp-url.se/你能看出出了什么问题吗？

我在下面得到了一个建议，我看到它的链接隐藏在图片下方。如何移动链接？

我真的希望图片具有测试网站中的位置..

我编辑了这个问题以删除我的公众视线的链接，因为Bartdude建议避免这种链接

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

}

Answer 1

你的woods.jpg图片有position: absolute，所以链接实际上在图片本身之下。只需移除绝对位置并调整边距（同时从padding-left元素中移除margin-left和.wood）

从截图中可以看到，链接 Movieproject （左侧突出显示）位于照片下

enter image description here

小心使用绝对位置：detäringendanspårosor：）

Answer 2

请从此课程中删除以下属性。。树木{ margin-left：10px; 保证金权利：10px; padding-left：10px; padding-right：10px; 位置：绝对; }

希望这能解决您的问题。 :)

Answer 3

http://rosepetals.se.temp-url.se/ 我在CSS class 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>

使用CSS和HTML丢失链接

3 个答案: