##CSS布局-a标签中的padding-top不起作用的解决方法

最新推荐文章于 2021-07-04 09:36:09 发布

七元八角oooo

最新推荐文章于 2021-07-04 09:36:09 发布

阅读量7.4k

点赞数 1

本文链接：https://blog.csdn.net/weixin_41892205/article/details/80331867

版权

1、a标签元素是内联元素，默认上下内边距跟上下外边距不起作用；

nav ul {
    overflow: hidden;
    border-left: .1em solid;
}
nav li {
    display: inline;
}
nav li a {
    padding: .5em 3em;  //只设置 标签的上下内边距
    border-right: .1em solid;
}

显示如图：可以看到内边距未显示出来

2、a便签设置为块元素则能够显示上下内边距

nav ul {
    overflow: hidden;
    border-left: .1em solid;
}
nav li {
    display: inline;
}
nav li a {
    display: block;  //设置为块元素
    padding: .5em 3em;
    border-right: .1em solid;
}

显示如图：块级元素独占一行

3.再设置浮动，水平排列

nav ul {
    overflow: hidden;
    border-left: .1em solid;
}
nav li {
    display: inline;
}
nav li a {
    display: block;
    float: left;  //向左浮动
    padding: .5em 3em;
    border-right: .1em solid;
}