Question

如何在正确的位置获取容器中的导航（在背景照片顶部）？它现在位于左下角的外面...... 我将导航定位在正确的位置，但它不能与容器中的图像一起使用。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>goodidea</title>
<link href="index.css" rel="stylesheet" type="text/css" />

<style type="text/css">
 img.c1 {width:1024px;height:1500px}
</style>

</head>
<body>
<div id="container"><img src="images/photo-1.jpg" class="c1"/></div>
<ul id="nav">
<li><a href="#">photo-2</a></li>
<li><a href="#">photo-3</a></li>
<li><a href="#">photo-4<3/a></li>
<li><a href="#">photo-5</a></li>
</ul>
</body>
</html>


* {
    padding: 0;
    margin:0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 130%;
}

#container {
    width: 1080px;
    height: 2000px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: auto;
    margin-left: auto;
}

#nav { 
    list-style-type: none;
    padding-top: 170px!important; 
    padding-bottom: 13px; 
}

#nav a:link, #nav a:visited { 
    color: #000000; 
    padding-top: 13px; 
    padding-bottom: 13px; 
    text-decoration: none; 
} 

#nav a:hover, #nav a:active { 
    padding-top: 10px; 
    padding-bottom: 10px; 
    color: #d2d2d2; 
    text-decoration: none; 
}

THNX提示/帮助

Answer 1

希望这是你所期待的。但正如@MelanciaUK评论的那样，你不应该使用容器类中的链接。

http://plnkr.co/edit/XSDrVmNmwsM2novVgm4T?p=preview

<div class='imagediv'>
  <img src="http://dummyimage.com/500x800/f5f0f5/d6d7e8.jpg" class="c1"/>
</div>
<ul id="nav" class='navlinks'>
  <li><a href="#">photo-2</a></li>
  <li><a href="#">photo-3</a></li>
  <li><a href="#">photo-4<3/a></li>
  <li><a href="#">photo-5</a></li>
</ul>

导航器没有放在容器内，在图像的顶部？到那里怎么走？

1 个答案: