css - 分页项目在悬停时移动并添加边框

Question

悬停时此菜单项正在移动。如何使项目静止且悬停时不移动。放置特定宽度和高度时也会发生同样的事情。这是新的 JSFiddle 链接。 http://jsfiddle.net/tagaawang/zTCCf/3/

/ CSS /

    <style type="text/css">
        .div{margin:0 auto;position:relative;margin-top:40px;}
   .pagination{height: 42px;
        clear: right;
        top: -21px;
        left: 0;
        position: absolute;}
   .pagination ul{width: 100%;max-height: 42px;}
   .pagination li{font-family: 'Open Sans', sans-serif;
        list-style: none;
        cursor: pointer;
        font-weight: 600;
        line-height: 23px;
        text-indent: 8px;
        color: white;
        background-color: #0083DE;
        height: 26px;
        font-size: 14px;display: inline-block;
        width: 26px;margin-left:10px;  }
    .pagination li.selected{background-color: white;
        border: 4px solid #F0F0F0;
        padding: 5px;
        position: relative;
        font-weight: 600;
        color: #0F7ABE;
        font-family: 'Open Sans', sans-serif;}
     .pagination li:hover{background-color: #0083DE;
        border: 4px solid #F0F0F0;
        padding: 5px;
        position: relative;
        font-weight: 600;
        color: #ffffff;
        font-family: 'Open Sans', sans-serif;}​
    </style>

html

<div class="div">
<div class="pagination">
    <ul>
    <li>1</li>
    <li class="selected">2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    </ul>
</div>
</div>

​</p>

Answer 1

根据您的代码，悬停和/或选定状态带有 4px 的边框：

border: 4px solid #F0F0F0;

这会导致偏离 4 像素的偏移，解决方案：

添加与站点背景颜色相同的边框作为占位符，然后在悬停时更改border-color.

.pagination li{
  border: 4px solid #fff;
}
.pagination li.selected, .pagination li:hover {
  border-color: #F0F0F0;
}