Question

我不知道为什么我的画廊的每个缩略图都是可点击的空间。如果我在 pcs div上使用 float：left ，那么过多的可点击区域会消失，但背景也会消失。我无处可寻。我是网页设计的新手。非常欢迎您的帮助。

HTML

<body background="hexagons.jpg" style="background-attachment: fixed;">


<div id="rect">
<script>
 var obj = document.getElementById("rect");
 obj.style.width = screen.availWidth / 1.2509 + 'px';
 obj.style.left = screen.availWidth / 10.50769 + 'px';
</script>
  <div id="logo">
    <img src="em.jpg" width=100% height=100%>
  </div>
  <div id="menu">
   <ul>
     <a href="index.html"><li>Pradžia</li></a>
     <a href="Galerija.html"><li>Galerija</li></a>
   </ul>
  </div>
<div id="pcs" style="background-image: url(metal.jpg); background-size:100% 100%;  height:auto">
<a class="fancybox" href="galerija/atlikti_darbai_1.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_1.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_2.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_2.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_3.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_3.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_4.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_4.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_5.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_5.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_6.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_6.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_7.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_7.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_8.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_8.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_9.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_9.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_10.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_10.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_11.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_11.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_12.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_12.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_13.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_13.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_14.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_14.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_15.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_15.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_16.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_16.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_17.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_17.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_18.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_18.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_19.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_19.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_20.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_20.jpg"></a>  
<a class="fancybox" href="galerija/atlikti_darbai_21.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_21.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_22.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_22.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_23.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_23.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_24.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_24.jpg"></a>
 </div>

<script>
 var obj = document.getElementsByClassName("pic");
 var size = obj.length;
 var wdth = (parseInt(document.getElementById("rect").style.width) - 800) / 8;
 for(var i = 0; i < size; i++)
 {
     obj[i].style.margin = wdth - 2 +'px';
 };
</script>
</div>
<script type="text/javascript">
  $(document).ready(function() {
    $(".fancybox").fancybox();
  });
</script>    
</body>

</html>

CSS

#rect
{
    margin: 0px;
    padding: 0px;
    position:absolute;
    top:0%; left:130px;
    width:1092px;height:100%;
}

#logo
{
    background-image: url(em.jpg);
    background-repeat:no-repeat;
    background-size: 100% 100%;
    height:247px;
    margin:0px;
    padding:0px;
}

#menu ul
{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    padding-top: -20px;
    padding-bottom: 0px;
}

#menu ul a
{
    margin: 0px;
    padding: 0px;
    float: left;
    display: inline;
    width: 50%;
    background-image: url(h_b1.gif);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position:relative;
    text-align: center;

}

#menu ul a li
{
    margin: 0px;
    padding: 0px;
    font-size: 18px;
    color: #300;
}

#vertical_div
{
    margin:3px;
    width:3px;
    background-color:silver;
}

#text
{
    width: 600px;
}

.pic
{
display:inline;
}

Answer 1

欢迎来到网页设计@lysergic的世界。

默认情况下，浏览器可能会导致margin/padding中不需要HTML个元素。要解决此问题，您可以使用 CSS reset 。

或者非常快速的解决方案，将其放在css文档的顶部：

* {
   margin:0;
   padding:0;
}

*是一个通用选择器，它会定位您网页上的所有元素并设置margin and padding of 0。

图像下方的可点击区域过多

1 个答案: