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

Question

谁能解释为什么这个按钮没有绝对定位到右边？我希望它与每条边的距离为 3 像素。

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

button 与大多数表单元素一样，是可替换元素。绝对定位时，替换元素的行为不同于常规的非替换元素(例如 div)。以下两点来自section 10.3.8 of CSS2.1申请:

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.

...

6. 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 使用的值不是 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，请从包装器的尺寸中减去填充。)

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