为了账号安全,请及时绑定邮箱和手机立即绑定

一个div里面含有a标签,a标签里有img标签,为什么div与a之间有空隙,不能完全贴合???

一个div里面含有a标签,a标签里有img标签,为什么div与a之间有空隙,不能完全贴合???

慕神4593838 2017-04-09 20:58:36
一个div里面含有a标签,a标签里有img标签,为什么div与a之间有空隙,不能完全贴合???
查看完整描述

5 回答

?
_凉心丶_

TA贡献1条经验 获得超0个赞

div标签和a标签可以紧挨着,没有完全贴合是因为代码格式的原因吧

查看完整回答
反对 回复 2017-05-03
?
慕神4593838

TA贡献2条经验 获得超0个赞

*{

padding: 0;

margin: 0 auto;

font-family: "宋体";

}

.Slider,.Content,.Main{

width: 100%;

height: 400px;

}

/*幻灯片内容*/

.Content /*.Main*/{

position: relative;

}

/*幻灯片图片*/

.Content .Main img{

width: 100%;

height: 400px;

}

/*幻灯片主题*/

.Content .Main .Caption{

position: absolute;

top:22%;

left: 25%;

}

.Content .Main .Caption h2{

font-size: 40px;

line-height: 50px;

text-align: right;

margin-right: -45px;

color: gray;

}

.Content .Main .Caption h3{

font-size: 75px;

line-height: 75px;

text-align: left;

margin-left: -45px;

color: rgb(000,000,000);

}

/*幻灯片控制按钮*/

.Content .Control{

width: 100%;

height: 13px;

position: absolute;

left: 0;

bottom:-13px;

background: red;

text-align: center;

}

.Content .Control a{

display: inline-block;

background: gray;

width: 180px;

height: 13px;

position: relative;

}

.Content .Control img{

width: 180px;

position: absolute;

bottom: 13px;

left: 0;


}


















.main-active .Caption h2{

margin-right: 0;

transition: all,0.5s;

}

.main-active .Caption h3{

margin-left: 0;

transition: all,0.8s;

}


html:


<!DOCTYPE html>

<html>

<head>

<title>带预览效果的幻灯片</title>

<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="css/index.css">

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/index.js"></script>

</head>

<body>

<div class="Slider">

<div class="Content" id="tpl">

<div class="Main" id="main-i" class="main-active">

<img src="img/{{index}}.jpg">

<div class="Caption">

<h2>{{h2}}</h2>

<h3>{{h3}}</h3>

</div>

</div>

<div class="Control">

<a href="javascript:switch();" class="Ctrl" id="ctrl-i"></a>

<a href="javascript:switch();" class="Ctrl" id="ctrl-i"></a>

</div>

</div>

</div>


</body>

</html>


查看完整回答
反对 回复 2017-04-10
?
爱吃鱼的狐

TA贡献2条经验 获得超0个赞

*{padding:0;margin:0}然后a设置为display:inline-block;设置浮动也可以,但是要清除浮动

查看完整回答
反对 回复 2017-04-10
?
后知后觉88

TA贡献39条经验 获得超10个赞

要么设置a浮动float:left,  要么设置a  display:block;

查看完整回答
反对 回复 2017-04-10
?
我爱吃牛排

TA贡献47条经验 获得超127个赞

代码复制上来帮你看

查看完整回答
反对 回复 2017-04-10
?
慕神4593838

TA贡献2条经验 获得超0个赞

*{

padding: 0;

margin: 0 auto;

font-family: "宋体";

}


查看完整回答
反对 回复 2017-04-10
  • 跳跃的鱼
    跳跃的鱼
    你的margin设置为0,不要auto,如果没问题看看你的父元素是否有边距
?
跳跃的鱼

TA贡献1条经验 获得超0个赞

首先清除padding,margin默认编剧看看
查看完整回答
反对 回复 2017-04-10
  • 5 回答
  • 1 关注
  • 6975 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信