按钮位置绝对不能按预期工作

Question

谁能解释一下为什么这个按钮没有绝对定位在右边？我希望它距离每条边都是 3px。

HTML:

<div class="wrapper">
    <button>Hello world</button>
</div>

CSS:

.wrapper {
    height: 300px;
    width: 300px;
    background-color: #f33;
    position: relative;
}

.wrapper button {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    right: 3px;
}

此外，按钮如何能够垂直对齐其内容？

Answer 1

您需要设置按钮的宽度，使其填满space。

最简单的方法是将其设置为正确的大小。

.wrapper {
    height: 300px;
    width: 300px;
    background-color: #f33;
    position: relative;
}

.wrapper button {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    right: 3px;
    height: 294px;
    width: 294px;
}

Answer 2

请在下方使用css ..

.wrapper {
    height: 300px;
    width: 300px;
    background-color: #f33;
    position: relative;
    padding: 3px
}
.wrapper button {
    position: absolute;
    top: 0;
    bottom:0;
    left:0;
    right:0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width:100%;
}

Answer 3

我认为你正试图将按钮放在 center.You 声明的顶部和左侧 3px 所以无论你定义什么底部和右侧按钮都将是顶部和左侧 3px 忽略 other.To将按钮放在中心使用 marginFirst 定义按钮的宽度并设置 marginLike thia

.

wrapper button{
  Width:100px;
   margin:0px auto;

}

非保证金不适用于绝对位置。

Answer 4

您可能希望对 width 和 height css 属性使用 inherit/100% 值。

.wrapper {
    height: 300px;
    width: 300px;
    background-color: #f33;
    padding: 3px;
}
.wrapper button {
    width: inherit;
    height: inherit;
}

Fiddle

注意：如果您希望尺寸恰好 300，则减去填充。（这将是 294px）

Answer 5

您可以使用 calc 来获得精确的宽度减去您从定位中获得的填充：

width: calc(100% - 6px);

JSFiddle

Answer 6

.wrapper {
    height: 300px;
    width: 300px;
    background-color: #f33;
    position: relative;
}

.wrapper button {
    position: absolute;
    top: 3px;
    bottom: 3px;width:97.5%;
    right: 3px;
}

试试这个。

Answer 7

button 和大多数表单元素一样，是可替换元素。绝对定位时，替换元素的行为与常规非替换元素（例如 div）不同。 section 10.3.8 of CSS2.1 中的以下两点适用：

The used value of 'width' is determined as for inline replaced elements. If 'margin-left' or 'margin-right' is specified as 'auto' its used value is determined by the rules below.

...

If at this point the values are over-constrained, ignore the value for either 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.

按钮的宽度不是根据指定的偏移量确定的，这与非替换元素不同，而是根据按钮本身的内容。由于width的used值不是auto，而left和right的指定值也不是auto，值被过度约束，浏览器被迫忽略right 为了尊重 width.

如果您希望按钮填满包装器的整个高度和宽度，请不要使用绝对定位。相反，在按钮上指定 100% 的高度和宽度，并在包装器上使用填充来偏移按钮：

.wrapper {
    height: 300px;
    width: 300px;
    background-color: #f33;
    padding: 3px;
    box-sizing: border-box;
}

.wrapper button {
    height: 100%;
    width: 100%;
}

<div class="wrapper">
    <button>Hello world</button>
</div>

（如果不能使用 box-sizing，请从包装器的尺寸中减去填充。）

文本的垂直对齐方式可能与浏览器默认绘制按钮控件的方式有关，这通常基于系统按钮控件。

按钮位置绝对不能按预期工作

button position absolute not working as expected

html

css

css-position