CSS：停止列表项在悬停时轻推？

【问题标题】：CSS: Stop List Items nudging right on hover?CSS：停止列表项在悬停时轻推？
【发布时间】：2011-07-18 05:54:42
【问题描述】：

我的菜单在悬停时需要虚线边框，是否可以停止它在悬停时将列表项轻推到右侧？

http://jsfiddle.net/mkTvp/

它将在 CMS 中，因此我无法在 LI 上设置宽度

【问题讨论】：

标签： css

【解决方案1】：

给项目 2px 透明边框：http://jsfiddle.net/mkTvp/1/

【讨论】：

我猜透明边框会比彩色边框更好，尤其是如果 bg 是渐变 +1
谢谢，这是一个如此简单的解决方案！

【解决方案2】：

只要给原来的样式加上一个与背景颜色相同的边框：

li {
    display: block;
    float: left; 
    padding: 3px;
    border: 2px solid #fff; /*same as background color*/
}

Example here.

【讨论】：

【解决方案3】：

a {
    background-color: #F78F1E;
    color: #fff;
    display: block;
    font-family: helvetica, sans-serif;
    font-size: 0.688em;
    font-weight: bold;
    padding: 12px 12px;
    text-decoration: none;
    text-transform: uppercase;
    width: auto;

}

li {
    display: block;
    float: left; 
    padding: 1px;
    border: 2px solid white; /** Same as background-color */ 
}

li:hover { border: 2px dashed #F78F1E;}

【讨论】：