样式错乱
问题描述：
设置导航栏，把a标签改为块级元素后，
按照老师把块级元素加上宽高后样式会如图错乱，
但是把宽高去掉就不会错乱，这是为什么呢？
相关代码：
* {
margin: 0;
padding: 0;
}
ul,
ol {
list-style: none;
}
a {
text-decoration: none;
}
header .header-top {
width: 1201px;
margin: 0 auto;
}
header .header-top .log {
padding-top: 39px;
width: 192px;
height: 63px;
color: #00978E;
font-size: 20px;
float: left;
}
header .header-top .tool {
float: right;
padding-top: 39px;
width: 260px;
height: 77px;
}
.clear-box {
clear: both;
}
header .tool .r1 {
padding-bottom: 10px;
}
header .tool .r1 .tel {
width: 32px;
height: 25px;
}
header .tool .r1 .tel-num {
display: inline-block;
width: 158px;
height: 26px;
color: #00978E;
font-size: 20px;
text-align: center;
}
header .tool .r1 .icon {
width: 27px;
height: 27px;
}
header .tool .r2 {
width: 264px;
height: 28px;
display: inline-block;
border: 1px solid rgba(99, 99, 99, .6);
display: inline-block;
}
header .tool .r2 input {
border: none;
padding-left: 20px;
outline: none;
height: 26px;
line-height: 26px;
float: left;
}
header .tool .r2 button {
position: relative;
width: 20px;
height: 20px;
line-height: 20px;
padding-right: 5px;
float: right;
background: none;
outline: none;
border: none;
cursor: pointer;
top: 3px;
right: 3px;
}
header .main-nav {
width: 100%;
height: 60px;
background-color: #00978E;
}
header .main-nav ul {
width: 1200px;
height: 60px;
margin: 0 auto;
}
header .main-nav ul li {
float: left;
width: 150px;
text-align: center;
line-height: 60px;
color: #fff;
}
header .main-nav .cur {
background-color: #015E58;
}
header .main-nav ul li a {
/*a 标签一定要转块*/
display: block;
font-size: 16px;
color: #fff;
width: 150px;
height: 60px;
}
相关截图：
18
收起
正在回答
2回答
同学你好，测试代码是嵌套的问题，可以看到li中有两个a标签，外面还有一个a标签
代码中给a设置高度为60px，两个a高度也就是120px，所以效果中超出了。
这是代码中a没有写闭合标签导致的，修改正确即可
祝学习愉快！
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星