1

我将两张图像垂直放在一起，但有一个间隙，我尝试了所有方法，但我找不到什么问题？在这个网站上（左下角黄色图片）， http://www.jamesxu.com.au/contact

HTML

<div class="pic_wrap">  
    <img id="contact" src="http://www.jamesxu.com.au/wp-content/themes/BLANK-Theme-realone/images/contact_01.png"> 
    <a class="email" href="mailto:hi@jamesxu.com.au"> </a>
    <a class="message" href="http://www.jamesxu.com.au/contact/"> </a>
</div>

CSS

.pic_wrap {width:216px; margin:auto;}
a.email {background:url(images/ico.png) left -80px no-repeat; display:inline-block; width:216px; height:35px; line-height:0; font-size:0;}
a.email:hover {background:url(images/ico.png) left -120px no-repeat ; }

a.message {background:url(images/ico.png) left -164px no-repeat; display:inline-block; width:216px; height:45px; line-height:0; font-size:0;}
a.message:hover {background:url(images/ico.png) left -208px no-repeat ;}
4

6 回答 6

0

改变

a.email   { display: inline-block; }
a.message { display: inline-block; }

至

a.email   { display: block; }
a.message { display: block; }
于 2013-06-06T09:07:30.480 回答
0

在您的 a.email 课程中，尝试“display: block;” 而不是内联块

于 2013-06-06T09:02:22.697 回答
0

Déja vue，几天前，图像站在基线上 :)

这是您正在寻找的答案吗？CSS 中的 Table Cell padding-bottom 不起作用（关于图像）

于 2013-06-06T08:54:26.370 回答
0

那是因为这 2 个A标签 ( .email& .message)inline-block由换行符 (Enter) 分隔。

将这两个A元素更改为display: block;，你会没事的。

于 2013-06-06T08:47:29.110 回答
0

添加 adisplay: block;到里面的所有元素.pic_wrap，目前你的a标签在display: inline-block

<div class="pic_wrap">  
  <img id="contact" src="http://www.jamesxu.com.au/wp-content/themes/BLANK-Theme-realone/images/contact_01.png"> 
  <a class="email" href="mailto:hi@jamesxu.com.au"> </a> //<--this needs to be display:block
  <a class="message" href="http://www.jamesxu.com.au/contact/"> </a> //<-- this needs to be display: block
</div>
于 2013-06-06T08:48:34.270 回答
0

将显示类型更改为block：

a.email {background:url(images/ico.png) left -80px no-repeat; display:block; width:216px; height:35px; line-height:0; font-size:0;}
a.message {background:url(images/ico.png) left -164px no-repeat; display:block; width:216px; height:45px; line-height:0; font-size:0;}

在 Chrome 中尝试和测试：

在此处输入图像描述

于 2013-06-06T08:48:51.150 回答