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