Question

任何人都可以解释为什么按钮不是绝对定位到右边？我希望它从每个边缘都是3px。

button in wrapper

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的以下两点：

'width'的使用值确定为内联替换元素。如果'margin-left'或'margin-right'被指定为'auto'，其使用价值将由以下规则确定。

...


如果此时值过度约束，则忽略'left'的值（如果包含块的'direction'属性为'rtl'）或'right'（如果'direction'为'ltr'）并解决这个价值。

按钮的宽度不是基于指定的偏移量，与未替换的元素不同，而是由按钮本身的内容决定。由于width的使用值不是自动的，并且left和right的指定值不是自动的，因此值过度约束并且浏览器被强制忽略{{1为了尊重right。

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

width

.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>，请从包装器的尺寸中减去填充。）

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

Answer 2

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

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

Fiddle

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

Answer 3

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

width: calc(100% - 6px);

JSFiddle

Answer 4

请使用以下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 5

我认为你试图把按钮放在中心。你宣布顶部和左边3px所以无论你定义什么，底部和右边的按钮将从顶部和左边忽略其他3px。把按钮放在中心使用marginFirst定义按钮的宽度并设置marginLike thia

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

}

没有保证金不适用于绝对头寸。

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

您需要设置按钮的宽度，使其填充空间。

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

.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;
}

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

7 个答案: