相對於中間按鈕的按鈕

Question

我試圖讓新聞按鈕和播放按鈕觸摸中間主頁按鈕，以便它們始終與中間有一個預設距離，但我不知道如何。

CSS：

#homebutton { 
position: absolute; 
z-index: 3; 
margin-left: -133px; 
margin-right: -133px; 
left: 50%; 
top: 196px; 
} 

#newsbutton { 
position: absolute; 
z-index: 3; 
margin-left: -125px; 
margin-right: -125px; 
left: 34%; 
top: 196px; 
} 

#playbutton{ 
position: absolute; 
z-index: 3; 
margin-left: -125px; 
margin-right: -125px; 
right: 34%; 
top: 196px; 
} 

HTML：

<img src= "http://i.imgur.com/nYFGA55.png" id= "playbutton" onmouseover= "this.src= 'http://i.imgur.com/5bFu4zm.png'" onmouseout= "this.src= 'http://i.imgur.com/nYFGA55.png'"> 
</img> 
<img src= "http://i.imgur.com/VNaqgtL.png" id= "newsbutton" onmouseover= "this.src= 'http://i.imgur.com/rMDNaaM.png'" onmouseout= "this.src= 'http://i.imgur.com/VNaqgtL.png'"> 
</img> 
<img src= "http://i.imgur.com/rq2W4TA.png" id= "homebutton" onmouseover= "this.src= 'http://i.imgur.com/yJClibn.png'" onmouseout= "this.src= 'http://i.imgur.com/rq2W4TA.png'"> 
</img> 

網站本身： http://gentexcodes.com/

Answer 1

我認爲最好的辦法是增加一個容器中，並使用text-align: center到中心內部的按鈕它。如果您在標記中使用「主頁」按鈕中間的按鈕，這是一個非常簡單的解決方案。由於無論如何按鈕都是圖片，因此您可以在容器上使用font-size: 0以刪除按鈕之間的空白。您也可以通過刪除關閉>和下一個按鈕的開頭<之間的空格來標記。

爲了簡潔起見，我已經移除了懸停效果，縮小了按鈕以避免弄亂較小的內聯可運行代碼片段，並添加了邊框以清楚地顯示按鈕正在觸摸。這不應該改變一般的解決方案。

.buttonbar { 
 
    text-align: center; 
 
    background-color: #ccc; 
 
    font-size: 0; 
 
} 
 

 
.button { 
 
    border: 1px solid blue; 
 
    width: 100px; 
 
    height: 20px; 
 
    font-size: 1rem; 
 
}

<div class="buttonbar"> 
 

 
<img src= "http://i.imgur.com/nYFGA55.png" id="playbutton" class="button"> 
 
<img src= "http://i.imgur.com/rq2W4TA.png" id="homebutton" class="button"> 
 
<img src= "http://i.imgur.com/VNaqgtL.png" id="newsbutton" class="button"> 
 
    
 
</div>

就個人而言，我不會爲此使用的img標籤可言，因爲語義上它並沒有多大意義。我會選擇一個<a href>鏈接到正確的頁面。然後，通過CSS，可以隱藏文本（或使其透明），設置背景圖像，並在元素懸停時設置另一個背景圖像。這樣，您就可以更清潔，更容易維護，無JavaScript和CSS的完全操作的頁面，沒有JavaScript的正確樣式（具有懸停效果），並且語義上正確，可由搜索引擎索引並可供屏幕閱讀器和其他人使用爲視障人士提供的工具。

但這只是一個意見。 ;）