鼠标经过li加了个上边框，文字就自己动了

夏夏夏果 2018-03-24 04:27:37

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>新浪首页</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.box{
margin: 100px auto;
background-color: #f9f9f9;
width: 400px;
height: 40px;
border: 1px solid #dbdfe1;
}
ul li{
height: 40px;
list-style: none;
float: left;
width: 60px;
line-height: 40px;
text-align: center;
}
ul li a{
text-decoration: none;
color: black;
}
ul li:hover{;
background-color: white;
border-top: 3px solid #ff8500;
border-left: 1px solid #dbdfe1;
border-right: 1px solid #dbdfe1;
}
ul li a:hover{
color: #ff8500;
padding-top: -3px;
}

</style>
<body>
<div class="box">
<ul class="title">
<li><a href="#">图片</a></li>
<li><a href="#">专栏</a></li>
<li><a href="#">热点</a></li>
</ul>
</div>
</body>
</html>
3个li鼠标经过文字会动

...全文

562 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

夏夏夏果 2018-03-24

打赏
举报

引用 1 楼天际的海浪的回复:

ul li{ height: 39px; list-style: none; float: left; width: 60px; line-height: 37px; text-align: center; margin-top: -1px; border-top: 3px solid transparent; border-left: 1px solid transparent; border-right: 1px solid transparent; }

懂了，给在li里面加个透明边框，让她原先就有占位，我去试试

天际的海浪 2018-03-24

打赏
举报

ul li{ height: 39px; list-style: none; float: left; width: 60px; line-height: 37px; text-align: center; margin-top: -1px; border-top: 3px solid transparent; border-left: 1px solid transparent; border-right: 1px solid transparent; }