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

但这只是一种意见。 ;）

按钮相对于中间按钮

1 个答案: