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

爱上喝水的女孩

于 2018-03-25 22:49:22 发布

阅读量2.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： html 文章标签： html

本文链接：https://blog.youkuaiyun.com/ginaxueyan/article/details/79691893

本文通过CSS样式解决了HTML列表项边框重合的问题，并且利用特定的padding设置避免了鼠标悬停时文字抖动的现象。通过示例代码展示了具体的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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;/*同上，解决的文字抖动的问题*/

        }