html - 使用 CSS 使用相对位置对齐屏幕底部的按钮

Question

我需要在屏幕底部放置一个按钮。我需要使用相对尺寸而不是绝对尺寸，因此它适合任何屏幕尺寸。

我的 CSS 代码：

position:relative;
left:20%;
right:20%;
bottom:5%;
top:60%;

score 27 · Accepted Answer

下面的 css 代码始终将按钮保留在页面底部

position:absolute;
bottom:0;

既然你想在相对定位中做到这一点，你应该去margin-top:100%

position:relative;
margin-top:100%;

EDIT1： JSFiddle1

EDIT2：将按钮放在屏幕中央，

position:relative;
left: 50%;
margin-top:50%;

score 7 · Accepted Answer

这适用于任何分辨率，

button{
    position:absolute;
    bottom: 5%;
    right:20%;
}

score 3 · Accepted Answer

3

<button style="position: absolute; left: 20%; right: 20%; bottom: 5%;"> Button </button>

于 2013-06-12T05:24:07.353 回答

3 回答 3