html - 使元素 float 到指定宽度

Question

我使用 float 使登录表单显示在页面右侧的黑色栏中。但是，当用户调整窗口大小并使其具有较小的宽度时，表单会从背景图像上升。我希望它在宽度为 100px 时停止 float 并且不移动。我的网站是http://greek.netii.net .
我使用以下HTML 代码:

<form action='index.php?action=login' method='post'>
  <ul id='loginbar'>
    <li>Email:<input id='logemail' type='text' name='email' />
        Password:<input id='logpass' type='password' name='pass' />
        <input class='button' type='submit' name='action' value='Login' />
    </li>
    <li><div id='forgotpass' onclick='forgotpass();'>Forgot Password?</div></li>
  </ul>
</form>

以及以下CSS 代码:

ul#loginbar {
    float:right;
    margin:25px 0px 0px 0px;
    list-style-type:none;
}

Answer 1

你不需要将它向右浮动，因为它会在调整大小时向内移动......使用这个

ul#loginbar
{
position: absolute;
top: 10px;
right: 10px;
margin:25px 0px 0px 0px;
list-style-type:none;

}

并且还在窗体或正文的父容器中添加

position: relative;
min-width: 600px;