Question

所以我想创建一个使用盒子阴影和边距的伪3d css3按钮，所以在点击时看起来就像是按下了它。

.button {
   margin: 0 0 5px 0;
   box-shadow: 0 5px 0 #000;
}

.button:active {
   margin: 5px 0 0 0;
   box-shadow: none;
}

除非我尝试在列表中使用此代码，否则它的工作完全正常：

<ul>
   <li><a href="#" class="button>Link</a></li>
   <li><a href="#" class="button>Link</a></li>
   <li><a href="#" class="button>Link</a></li>
</ul>

因为在这种情况下，当我将鼠标悬停在其中时，它会移动所有列表链接。有没有办法解决它？我宁愿坚持边距，因为位置相对顶部底部会影响页面上的其他元素。

这是一个小提琴：http://jsfiddle.net/6tpR8/

Answer 1

将vertical-align:top添加到.button类。

http://jsfiddle.net/6tpR8/1/

为了增加效果，请添加transition: all .25s以使其动画化（不完全支持，但在不受支持的浏览器中不会受到影响）。

http://jsfiddle.net/6tpR8/3/

Answer 2

你可以浮动它们：

ul li {
    float: left;
    display: inline-block;
    margin-right: 5px;
}

http://jsfiddle.net/6tpR8/2/

Answer 3

只需添加一个显示。

显示：内联块;

如果仍然没有解决它，你需要给它一个宽度。所以它实际上知道应该有多大。

对于IE，您可能需要添加：边界：无;

注意：几乎所有浏览器中的box-shadow都不同

CSS可按下按钮可移动所有列表元素

3 个答案: