求助 display:inline-block;！！！！-慕课网

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

来源：4-7 编程练习

菜呆米子

2016-06-09 10:34

<!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回答

原来国际范

2016-06-09 23:10:20

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

0 0

企业网站综合布局实战

本课程重点介绍HTML/CSS实现常见企业网站布局的方法

157043 学习 · 1984 问题

查看课程

相似问题

关于“display:inline-block"

回答 1

display:inline-block；这个不是什么浏览器都支持

回答 3

求助。。。

回答 4

为什么要弄成inline-block，求解！

回答 2

求高手帮助

回答 3

打开慕课网App查看更多内容