Question

html CSS 导航条的字体大小改变,背景色就会超出,参差不齐,怎么解决

就是导航条其他字体是18px,要设置某一个导航栏的文字为12px后,他的背景色会超出,该如何解决,下面是代码和截图:HTML:<nav id="topnav"><a href="index.html">首页</a><a href="newlist.html">慢生活</a><a href="share.html">PHP课堂</a><a href="about.html">关于我</a><a style="font-size:12px" href="about.html">关于我|</a><a href="about.html">关于我</a></nav>CSS:/* 导航 */nav { background: rgba(0,0,0,0.8); height: 48px; line-height: 48px; padding-left: 80px; filter: progid:DXImageTransform.Microsoft.gradient(gradientType = 0, startColorstr = #3333333, endColorstr = #3333333);nav a { display: inline-block; font-size: 18px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; color: #FFF; padding: 0 20px; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s; }nav a:hover { background: #e41635; }





Answer 1

/* 导航 */
nav { 
	background: rgba(0,0,0,0.8); 
	height: 48px; 
	line-height: 48px; 
	padding-left: 80px;
	filter: progid:DXImageTransform.Microsoft.gradient(gradientType = 0, startColorstr = #3333333, endColorstr = #3333333);
}
nav a { 
	display: block;
	font-size: 18px; 
	font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; 
	color: #FFF; 
	padding: 0 20px;
	float: left; 
	-webkit-transition: all 1s; 
	-moz-transition: all 1s; 
	-o-transition: all 1s; 
	transition: all 1s;
}
nav a:hover{
	background: #e41635;
	font-size:12px;
}

是display: inline-block; 的原因，把display: inline-block; 换成display: block;然后利用浮动（float: left;） 就没有这样的事情出现了。