0

ボタンを配置しようとしています。絶対位置に設定しているので、正しく配置する方法がわかりません。

「これはあなたの製品ですか？」というボタンです。

こちらの例をご覧ください:(削除済み）

右側のサイドバーのウィジェットの真上に、周囲に5pxの間隔で配置したいと思います。それ、どうやったら出来るの？

私はもともとここからボタンを取りました：http：//cssdeck.com/t/uHhhprW6

ヘルプに感謝します。

4

4 に答える 4

1

あなたButtonがいつも同じ場所にいるので、あなたがそれをすることができるなら：

​.but {
    position: absolute;
    width: 80px;
    height: 25px;
    background-color: #DEDEDE;
    right: 0;
    margin: 5px;
}​

rightそして、あなたやあなたが望むものを編集するだけtopです。小さな例

于 2012-06-17T23:18:27.553 に答える
0

ボタンで使用する場合は、、、、およびプロパティを使用position: absoluteしてボタンの場所を指定できます。たとえば、IDを持つ要素をページの右上に配置し、上部と右側の両方に5pxの間隔を空けるには、次のCSSコードを使用できます。toprightbottomleftbutton

#button {
    position: absolute;
    top: 5px;
    bottom: 5px;
}

要素を親要素の右側に配置するだけの場合は、を使用する必要がありますfloat: right。margin-top次に、、、を使用してmargin-right、要素がその周囲にある程度のマージンを確保できるようにします。margin-bottommargin-left

違いについては、私の例のFiddleを参照してください。両方の「ボタン」はHTMLコードの同じdiv内にありますが、絶対位置にあるボタンはそのブロックの外側にあるように見えることに注意してください。

CSSの配置の詳細については、この記事を参照してください。

于 2012-06-17T23:18:41.260 に答える
0

要素にが含まれている場合は、、、、および をposition: absolute使用して要素を配置する必要がleftあります。このプロパティで使用する値は、最も近い位置にある祖先を基準にする必要があります（「位置付けられた」要素は、空白または以外の値を持つ要素です）。righttopbottompositionstatic

たとえば、次のHTMLについて考えてみます。

<div id="container">
    <div id="position_me"></div>
</div>

そして次のCSS：

#container { 
    width: 500px; 
    height: 500px; 
    position: relative; 
    border: 1px solid green;
}
#position_me { 
    width: 20px; 
    height: 20px; 
    position: absolute; 
    left: 100px; 
    top: 100px;
    border: 1px solid red;
}

赤いボックスは、コンテナの上部の境界線から100ピクセル、コンテナの左側の境界線から100ピクセルになります。

作業例を参照してください。

于 2012-06-17T23:20:12.087 に答える
0

私がそれを機能させるための最も簡単な方法は、ルールから、、、、および宣言を削除し、それをtopに変更することでした。leftfloatmargin-left.emailpositionrelative

.email {
position: relative; /* not absolute */
width: 220px;
height: 30px;
font: .75em "lucida grande", arial, sans-serif;
margin: 0 0 5px 0;
}

この特定のボタンを作成するためのよりクリーンでシンプルな方法があると思います-包含要素とその子で進行中の絶対的な配置がたくさんあるようです。しかし、私が提案した変更は、迅速な修正として機能するようです。

于 2012-06-17T23:29:16.297 に答える