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

求助 display:inline-block;!!!!


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>页码的制作</title>
<style type="text/css">
/*在此定义相关CSS样式*/
.page{
    height:40px;
    line-height:40px;
    text-align:center;
}
.page a{
    display:inline-block;
    text-decoration:none;
    border:1px solid #E8E8E8;
    margin:5px;
    padding:5px 10px;
    font-size:14px;
    font-family:"微软雅黑";
}
.page a:link,.page a:visited{
    color:#000;
}
.page a:hover,.page a:active{
    color:#FFF;
    background-color:#F00;
}
     
</style>
</head>
 
<body>
<!--在此制作页码的基本结构-->
<div class="page">
    <a href="#">首页</a>
    <a href="#">&lt;</a>
    <a href="#">1</a
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">...</a>
    <a href="#">&gt;</a>
    <a href="#">末页</a>
</div>
 
 
</body>
</html>

为什么我一把display:inline-block;加进去 ,a标签就变大了!!!

正在回答

代码语言

1 回答

块级元素设置margin和padding是正常的, 内联元素设置margin和padding的上下是无效的,当你把display:inline-block;加进去后a标签上的padding:5px(这个就会起作用的) 10px; 所以看起来a标签就变大了

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

求助 display:inline-block;!!!!

我要回答 关注问题
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号