2

我的网站上有一个登录表单，当用户单击按钮时会显示该表单。它是一个浮动在其他内容上的 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：

登录框{背景颜色：#C1DEEE; 填充：10px；z-索引：1；位置：绝对；顶部：66px；}

是否可以仅在 CSS 中执行此操作？

谢谢

4

4 回答 4

4

将登录信息包装在另一个 div 中并将其称为内部登录，然后将其相对于绝对定位的外部 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

我想你可能想试试

浮动：对

或者

文本对齐：右

于 2009-08-13T22:41:22.930 回答
0

我用“主窗格”类创建了新的 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;  
}

谢谢，阿伦克里希南

于 2011-09-27T06:06:05.543 回答
0

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

使容器位置：相对。

然后给出登录的东西位置：absolute; 右：0；。

顺便说一句，请注意这里；仅要求 Javascript 登录是非常粗鲁的。许多人出于各种原因运行 NoScript。

于 2009-08-13T22:45:13.420 回答