您的位置：首页 > Web前端 > HTML

html之解决边框重合问题，鼠标移动文字上文字抖动问题

2018-03-25 22:49 435 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0px;
margin: 0px;
}
ul{
list-style:none;
width: 510px;
margin-left: -1px;/*解决的左侧边框重合的问题，给整体的ul向左移动1像素*/
}
li{
float: left;
width: 100px;
height: 40px;
text-align: center;
padding: 0px 1px;/*为了解决鼠标移动到文字上文字抖动的问题，所以采用这种办法，用替代的方式*/
cursor: pointer;
font: 400 18px/40px "simsun";

}
li:hover{
font-weight: 700;
color: #f40;/*width:98px;*/
border-left: 1px solid #000;
border-right: 1px solid #000;
padding: 0px;/*同上，解决的文字抖动的问题*/

}

/*另外解决文字抖动还可以这样设置,给它的宽度设置为98pxli:hover{width:98px}*/
.box{
width: 500px;
height: 400px;
margin: 100px auto;
overflow: hidden;
border: 1px solid #cccccc;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>公告</li>
<li>规则</li>
<li>论坛</li>
<li>安全</li>
<li>公益</li>
</ul>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航