css - 位置按钮距右侧 8px

Question

我正在构建一个宽度为 100% 的菜单 - 我试图将一个按钮放在左侧，一个放在右侧。

这就是我所拥有的，但是您可以看到该按钮未放置在距右侧 8px 的位置。

我该怎么办？谢谢！

#options-buttons {
    height: 40px;
    width: 100%;
}

.okay_button
{
  position: relative;
  top: 3px;
  right: 8px;
  background-image:url('http://i.imgur.com/RIIV8.png');
  float: left;
  display: block;
  width: 68px;
  height: 34px;
  background-repeat: no-repeat;
  outline: none;
}

.okay_button:hover
{
  background-position: 0 -34px;
}

Answer 1

使用左右浮动； jsFiddle

.okay_button
{ 
  top: 3px;
  right: 8px;
  background-image:url('http://i.imgur.com/RIIV8.png');
  float: right;
  display: block;
  width: 68px;
  height: 34px;
  background-repeat: no-repeat;
  outline: none;
}

Answer 2

您只需要更改position: relative;为position: absolute;on your .okay_button，因为这将强制它相对于其容器，而不是相对于其正常位置。

工作示例：http: //jsfiddle.net/zPkH8/3/

.okay_button
{
  position: absolute;

  ...

}

Answer 3

工作示例（出于演示目的，我用文本替换了背景）：

您混合浮动、显示和位置不正确。