相对于中间按钮的按钮

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的正确样式（具有悬停效果），并且语义上正确，可由搜索引擎索引并可供屏幕阅读器和其他人使用为视障人士提供的工具。

但这只是一个意见。 ;）