1

所以我想创建使用 box-shadow 和 margin 的伪 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/

4

3 回答 3

11

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

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

对于添加的效果添加transition: all .25s使其动画（不完全支持，但在不受支持的浏览器中不会受到伤害）。

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

于 2013-03-01T23:45:37.640 回答
1

你可以浮动它们：

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

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

于 2013-03-01T23:46:23.643 回答
0

只需添加一个显示器。

显示：内联块；

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

对于 IE，您可能需要添加：border:none;

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

于 2013-03-01T23:50:19.783 回答