html - 使元素浮动直到指定宽度

Question

我使用浮动来使登录表单在页面右侧以黑条显示。但是，如果用户调整窗口大小并使其具有较小的宽度，则表单会从背景图像上升。我希望它在宽度为 100 像素时停止浮动并且不移动。我的网站是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

您可以使用以下 CSS 属性设置最小宽度和高度：

min-width: 100px;
min-height: 150px;

避免组件减少太多。

Answer 2

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

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

}

以及在表单或正文的父容器中添加

position: relative;
min-width: 600px;