- CSS为什么我创造出来的盒子尺寸和实际的盒子尺寸不一样
-
<!doctype html> <html> <head> <meta charset="utf-8"> <title>tab栏切换</title> <script src="jquery-1.11.1.min.js"></script> <style> *{/*去除页面原有边距*/ margin: 0; padding: 0; } .wrapper{ width: 400px; height: 33px; margin: 100px auto; border: 1px solid red; } .tab-item{ float:left; display: block; font-size: 20px;/*字体大小*/ background-color: white; } a:hover{/*鼠标悬停变色*/ background-color:aqua; } ul{/*去除小圆点*/ list-style: none; } a{ text-decoration: none;/*去除下划线*/ } </style> </head> <body> <div class="wrapper"> <ul class="ulclass"> <li class="tab-item"><a href="#">国际大牌</a></li> <li class="tab-item"><a href="#">国妆名牌</a></li> <li class="tab-item"><a href="#">清洁用品</a></li> <li class="tab-item"><a href="#">男士精品</a></li> </ul> </div> </body> <script> </script> </html>