2

我正在构建一个宽度为 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;
}
4

3 回答 3

5

使用左右浮动; 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;
}
于 2012-10-06T18:37:43.183 回答
1

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

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

.okay_button
{
  position: absolute;

  ...

}
于 2012-10-06T18:44:28.493 回答
1

工作示例(出于演示目的,我用文本替换了背景):

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

于 2012-10-06T18:41:42.413 回答