2

ユーザーがボタンをクリックすると表示されるログインフォームがWebサイトにあります。他のコンテンツの上に浮かぶdivです。ページのごく一部（サインインリンクのすぐ下）を占めるだけです。

1つの小さなことを除けば、すべて正常に機能します。サインインリンクの左側に配置されて表示されます（下の図を試しました）。

|サインイン|

|ここにサインインしてください|

私は実際にそれをこのように見せたいです（サインインリンクの右側に揃えてください）：

                |サインイン|

|ここにサインインしてください|

これは私のHTMLです：

        <div class="clear">
            <a class="button" id="SignInBtn" href="#" onclick="toggleSignInBox(); return false;"><span id="spanSignIn">Sign In / Register <img src="../../Content/shared/arrow_down.png" border="0" /></span></a>
        </div>
        <div id="signinbox" style="display:none;">
            <p>Who would you like to sign in with?</p>
            <p>Google</p>
            <p>Yahoo</p>
            <p>Other</p>
        </div>

サインインボックスのCSS：

サインインボックス{background-color：＃C1DEEE; パディング：10px; z-index：1; 位置：絶対; top：66px; }

CSSだけでこれを行うことは可能ですか？

ありがとう

4

4 に答える 4

4

サインイン情報を別のdiv内にラップし、それをinner-signinと呼び、絶対位置の外側のdivを基準にして配置します。また、絶対位置の外側のdivに幅を設定する必要がある場合もあります。

div.inner-signinbox {
    position: relative;
    right: 20px;
}

signinbox {
    width: 250px; //ADD A WIDTH
    background-color:#C1DEEE; 
    padding:10px; 
    z-index:1; 
    position: absolute;
    top:66px; 
}

それでも問題が解決しない場合は、署名ボックスに「左」プロパティを追加して、垂直方向だけでなく水平方向の位置も設定してください。xとyで要素を絶対位置に配置できない理由はありますか？

于 2009-08-13T22:42:01.040 に答える
1

やってみたいと思います

フロート：右

また

text-align：right

于 2009-08-13T22:41:22.930 に答える
0

サインインボタンを含むdiv内にサインインアイテムを配置します。

コンテナの位置を相対にします。

次に、サインインスタッフの位置を指定します。そして右：0;。

ちなみに、ここでは注意してください。ログインするためだけにJavascriptを要求するのはかなり失礼です。多くの人がさまざまな理由でNoScriptを実行しています。

于 2009-08-13T22:45:13.420 に答える
0

クラス「メインペイン」で新しいdivを作成しました。「サインインボックス」の位置を調整できます。「right」と「top」の値を変更することにより、cssから。

<div class="main-pane">
  <div class="clear">
            <a class="button" id="SignInBtn" href="#" onclick="toggleSignInBox(); return false;">
                 <span id="spanSignIn">Sign In / Register <img src="../../Content/shared/arrow_down.png" border="0" /></span>
           </a>
  </div>
  <div id="signinbox" style="display:none;">
            <p>Who would you like to sign in with?</p>
            <p>Google</p>
            <p>Yahoo</p>
            <p>Other</p>
   </div>
</div>

.main-pane{
    position:relative;
}

#signinbox{
    width: 250px; 
    background-color:#C1DEEE; 
    padding:10px; 
    z-index:5; 
    position: absolute;
    top:66px;
    right:0px;  
}

ありがとう、アルン・クリシュナン

于 2011-09-27T06:06:05.543 に答える