CSS可按鈕移動所有列表元素

Question

所以我想創建使用box-shadow和邊距的僞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

只需添加一個顯示器。

顯示：inline-block;

如果仍然不能解決它，你需要給它一個寬度。所以它真的知道它應該有多大。

對於IE，您可能需要添加： border：none;

注意：box-shadow在幾乎所有瀏覽器中都不同