CSS محاذاة موقف المطلق

Question

لدي نموذج تسجيل الدخول على موقع الويب الخاص بي الذي يعرض عندما ينقر المستخدم على زر. إنه div يطفو على المحتوى الآخر. يستغرق سوى جزء صغير من الصفحة (أسفل رابط تسجيل الدخول مباشرة).

كل شيء يعمل بشكل جيد بعيدا عن شيء صغير واحد. إنه يعرض محاذاة إلى اليسار من علامة الرابط (حاولت مخطط أدناه).

| تسجيل الدخول |

| تسجيل الدخول الأشياء هنا |

أريد فعلا أن تبدو وكأنها (محاذاة إلى يمين علامة العلاقة):

| تسجيل الدخول |

| تسجيل الدخول الأشياء هنا |

هذا هو 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 لعلامة تسجيل الدخول:

SignInbox {خلفية اللون: # C1Deee؛ الحشو: 10 بكسل Z- مؤشر: 1؛ الموقف: المطلق؛ أعلى: 66PX؛ }

هل من الممكن القيام بذلك في CSS فقط؟

شكرًا

Answer 1

لف معلومات Signin داخل DIV آخر واتصل به Signin-signin ثم موضع نسبي إلى DIV خارج الموقع المطلق. قد تضطر أيضا إلى تعيين العرض على DIV Outter في وضع مطلق.

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؟

Answer 2

أعتقد أنك قد ترغب في المحاولة

تعويم: صحيح

أو

محاذاة النص: صحيح

Answer 3

ضع الاشياء تسجيل الدخول داخل DIV يحتوي على زر تسجيل الدخول.

جعل موقف الحاويات: قريب.

ثم امنح موقف الاشياء تسجيل الدخول: مطلق؛ واليمين: 0؛

بالمناسبة، اعتن هنا؛ تتطلب جافا سكريبت لمجرد تسجيل الدخول وقحا جدا. الكثير من الناس يديرون noscript لمجموعة متنوعة من الأسباب.

Answer 4

لقد قمت بإنشاء DIV جديد مع الطبقة "الجزء الرئيسي". يمكنك ضبط موضع "SignInbox". من 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;  
}

شكرا، آرون كريشنان