Question

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

This is what I have，但是你可以看到按钮没有从右边放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

Working example（为了演示目的，我用文本替换了背景）：

您正在错误地混合浮动，显示和位置。

Answer 3

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

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

.okay_button
{
  position: absolute;

  ...

}

从右侧开始按钮8px

3 个答案: