如何在懸停時向左移動文本？

Question

當鼠標光標懸停在按鈕上時，文本向下移動，我只需要向左移動文本5px ，將鼠標懸停在按鈕上時，如何實現呢？

 div { text-align: center; } span { margin-right: 10px; } button { background: green; border: none; padding: 9px; color: #FFF; border-radius: 50%; cursor: pointer; transition: all 500ms ease; } button:hover { padding: 13px; transition: all 500ms ease; } 

 <div> <span>test</span><button>&#10230;</button> </div> 

Answer 1

您面臨的“問題”是span元素的顯示類型為內聯，因此它將跟隨其同級元素。

我想有多種解決方法。

您可以添加vertical-align: top; 到跨度。 （超級簡單的CSS修復程序可保留HTML原樣。缺點：將文本修復到元素頂部）

 div { text-align: center; } span { vertical-align: top; margin-right: 10px; } button { background: green; border: none; padding: 9px; color: #FFF; border-radius: 50%; cursor: pointer; transition: all 500ms ease; } button:hover { padding: 13px; transition: all 500ms ease; } 

 <div> <span>test</span><button>&#10230;</button> </div> 

要真正解決此問題（不要在元素頂部流動文本），您需要在范圍之外添加包裝元素：

 .center { text-align: center; } span { margin-right: 10px; } .wrapper { display:inline-block; } button { background: green; border: none; padding: 9px; color: #FFF; border-radius: 50%; cursor: pointer; transition: all 500ms ease; } button:hover { padding: 13px; transition: all 500ms ease; } 

 <div class="center"> <p class="wrapper"><span>test</span></p><button>&#10230;</button> </div> 

您還可以將父級顯示為flex並據此對子級進行對齊：

 .flex { display: flex; justify-content: center; align-items: center; } span { margin-right: 10px; } button { background: green; border: none; padding: 9px; color: #FFF; border-radius: 50%; cursor: pointer; transition: all 500ms ease; } button:hover { padding: 13px; transition: all 500ms ease; } 

 <div class="flex"> <div><span>test</span></div><button>&#10230;</button> </div>