gpt4 book ai didi

html - CSS/HTML : Photo Gallery Thumbnails Smaller than Hyperlink

转载 作者:太空宇宙 更新时间:2023-11-03 18:44:12 24 4
gpt4 key购买 nike

我正在用 HTML 创建一个照片库,并使用 CSS 在缩略图之间添加空间。我遇到的问题是,当我点击缩略图时,“a”标签超链接卡在图像的下方、上方或侧面,具体取决于边距或填充。我怎样才能摆脱这种情况并让超链接仅保留在缩略图的范围内?

HTML

<html>
<head>
<title>Photo Gallery</title>
</head>
<body>
<div class="gallery">
<a href="EastAsia/eastasia_photo1.html"><img src="../images/EastAsia/1.jpg" alt=" "></a>
<a href="EastAsia/eastasia_photo1.html"><img src="../images/EastAsia/1.jpg" alt=" "></a>
<a href="EastAsia/eastasia_photo1.html"><img src="../images/EastAsia/1.jpg" alt=" "></a>
<a href="EastAsia/eastasia_photo1.html"><img src="../images/EastAsia/1.jpg" alt=" "></a>
</div>
</body>
</html>

CSS

body {
margin: 0 auto;
background-color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
padding: 0;
width: 960px;
}

img {
display: inline-block;
margin: 15px;
width: 150px;
height: 100px;
}

谢谢大家。我最终将每张图片放入一个 Div 类,然后在该类上设置边距,从而消除了问题!

最佳答案

给a标签添加样式:

display:inline-block;
font-size:1px;

参见此处:http://jsfiddle.net/XRhWe/左数第二个对象。

关于html - CSS/HTML : Photo Gallery Thumbnails Smaller than Hyperlink,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16781638/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com