CSS 绝对位置对齐

发布于 2024-08-02 01:17:48 字数 1176 浏览 5 评论 0原文

我的网站上有一个登录表单，当用户单击按钮时会显示该表单。它是一个漂浮在其他内容之上的 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; 内边距：10px； z 索引：1；位置：绝对; 顶部：66px； }

可以仅用 CSS 来做到这一点？

谢谢

原文

I have a login form on my website that displays when a user clicks a button. It is a div that floats over other content. It only takes up a small portion of the page (directly below the sign in link).

It all works fine apart from one small thing. It displays aligned to the left of the sign in link (i attempted a diagram below).

|sign in|
|sign in stuff here|

I actually want it to look like this (align to the right of the sign in link):

|sign
in|
|sign in stuff here|

This is my 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>

And the CSS for the sign in box:

signinbox {background-color:#C1DEEE;
padding:10px; z-index:1; position:
absolute; top:66px; }

Is it possible to do this in just CSS?

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

ま柒月 2024-08-09 01:17:48

将登录信息包装在另一个 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; 
}

如果这不起作用，为什么不直接向签名框添加“left”属性来设置水平位置和垂直位置。是否有原因无法使用 x 和 y 绝对定位元素？

Wrap the signin info inside another div and call it inner-signin then position that relative to the absolute positioned outter div. You may also have to set the width on the absolute positioned outter 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; 
}

If that does not work, why not just add a "left" property to the signingbox to set the horizontal position as well as the vertical. Is there a reason you don't can't absolute position the element with x and y?

回复收藏 0 原文

春夜浅 2024-08-09 01:17:48

我想你可能想尝试

float: right

或

text-align: right

回复收藏 0 原文

探春 2024-08-09 01:17:48

将登录内容放入包含登录按钮的 div 内。

使容器位置：相对。

然后给登录的东西位置：绝对；右：0；。

顺便说一下，这里要小心；仅仅要求 Javascript 来登录是相当粗鲁的。很多人出于各种原因运行 NoScript。

回复收藏 0 原文

作妖 2024-08-09 01:17:48

我创建了带有“main-pane”类的新 div。您可以调整“signinbox”的位置。通过更改“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;  
}

谢谢，
阿伦·克里希南

I have created new div with class "main-pane". You can adjust the position of "signinbox". from the css by changing the value of "right" and "top".

<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;  
}

Thanks,
Arun Krishnan

回复收藏 0 原文

~没有更多了~