请求大佬支援!!!!为什么我设置的盒子的大小和代码设置的大小不一样

图片说明

<!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;
        }

        .active{/*标题栏选中状态*/
            border-top: 3px solid red;  
        }


        a:hover{/*鼠标悬停变色*/
            background-color:aqua;
        }

        ul{/*去除小圆点*/
            list-style: none;
        }

        a{
            text-decoration: none;/*去除下划线*/
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <ul class="tab">
            <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>
//      需求:给tab栏的每一个li标签设置鼠标移入事件:当前li添加active类,其他的兄弟li移除active类
        $(function(){
//          给当前索引栏引入一致的div,让他添加selected类,其他的兄弟div移除selected类
            $('.tab>.tab-item').mouseenter(function(){
                $(this).addClass('active').siblings('li').removeClass('active');
            });

            $('.tab>.tab-item').mouseleave(function(){
                $(this).removeClass('active');
            });
        });
    </script>
</html>

css

1个回答

你好,盒子分两种。一种是怪异盒子:box-sizing:border-box; 还有一种是标准盒子 box-sizing:content-box;
我看到你css 这没有指定。你可以切换个盒子模型试试!
希望我的回答对你有帮助,希望采纳

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!

相似问题

5
thymeleaf使用ajax进行异步请求,不能获得model绑定的值
1
videoview快要滑出界面时,视频会覆盖顶上的导航条,求大佬指点!
3
关于mac安装homebrew报错!急急急!求大佬帮助!!!
1
求下面问题的matlab代码。求大佬指点!!
1
求大佬教!简单的GridView显示sql的问题!小白!
2
求解田字格python代码:我这个怎么就不行啊???大佬求解!!!
4
在vue中使用vue-reosure请求外网的传感器接口,一直请求成功拿不到数据,希望大佬教我下!!!
1
大四狗求助.M序列在2017b可运行,在2008a上一直busy ,球大佬解答!!!
3
关于c++大数的long long类型的中间计算问题,求大佬解,谢谢!!
1
vue启动成功,页面加载不出来
1
MPAndroidChart2.1.6版本以下代码为什么没有出来图像,求各位大佬解答!
0
antdpro 部署之后请求后台数据404
0
opencv+python人脸识别问题!请求大佬帮帮忙!
1
请问各位大佬,JFrame中的this.setTitle();设置标题,怎么改变这个标题大小???
2
SCRIPT5007: 无法获取未定义或 null 引用的属性“checked”无法提交表单,清空不了表单,希望大佬解答!
1
关于aspose word转pdf乱码问题(困扰了很久了!!!!请求大佬出现)
2
大佬,请求支援!!!CSS怎么在盒子右边添加垂直分隔线?
4
请求大佬支援!!!jQuery:为什么我的index()索引得到的结果都是偶数?
2
C++问题,请大佬相助!
3
求助:用myeclipse运行项目出现一堆的xx cannot be resolved to a type 求大佬指教