使元素浮动直到指定的宽度

Question

我使用float来使登录表单在黑色栏中显示在页面的右侧。但是，如果用户调整窗口大小并使其宽度较小，则表单会占用背景图像。我希望它停止浮动，当宽度为100px时不要移动。我的网站是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;