适合水平登录表单的HTML和CSS？

[横向登录表单]…他们不允许我发布图片：(

很接近，但是“忘记密码”已经被证明非常难以与密码字段的左边对齐。我正在使用Less.js编写更简洁的css，并使用变量和mixin，但是可以用直接的css编写任何解决方案

谢谢你的帮助

更新：

---

感谢两位提交解决方案的人。但我决定保留我现有的标记，并使用一种新技术，这种技术看起来很有希望：响应式网页设计。我认为这个想法是由Ethan Marcate首先提出的。它允许精确的比例布局，使用基于固定宽度比的百分比。它使从设计的角度来看，这是一个很有意义的问题。你需要自己和你的客户来检查这一点，它非常出色。

这里有一个跨浏览器工作的基本示例。你需要设置一些宽度等，以使其符合你的需要，但一般的对齐方式是设置好的

演示：

h1，部门#后勤表格*{
保证金：0；
填充：0；
列表样式：无；
}
h1{
浮动：左；
}
div#loginForm{
浮动：左；
}
后勤信息表ul li{
显示：内联；
}
标题

我不确定您必须严格遵守HTML结构，但主要问题是“忘记密码”链接在语义上与HTML中的密码字段没有关联。这将使定位变得异常困难，甚至在您必须更改表单时更难处理

我对HTML和CSS都做了一些小的（：p）更改；您可以看看我的JSFIDLE

你会注意到我已经用

ul

和

li

标记替换了你所有的

fieldset

标记，并将你的链接移动到与密码字段相同的

li

---

编辑：事实上，这里的布局与您在问题开头所描述的相同：

您能为我们提供一个JSFIDLE吗？：）将链接粘贴到图片中这是两个答案中最接近的一个。。。我想。但我的建议是检查Ethan Marcote的响应性网页设计。这就是我从现在开始设计的方式。这是一个绝妙的想法，也是时不时出现的想法之一。它将改变你看待网页设计的方式。

<!--
{Header}  {Email Input field} {Password Input field}  {Login Button}
                              {Forgot Password?} (..link is below Password field)
-->

<div id="login" class="section">
    <div class="header">
        <h1 class="non-display">APPROVED MEMBERS</h1>
    </div>
    <form class = "Fields">
        <fieldset class = "UserName">
            <label>
                <span class = "Label"></span>
                <input class = "Value" type = "text" />
            </label>
        </fieldset>
        <fieldset class = "Password">
            <label>
                <span class = "Label"></span>
                <input class = "Value" type = "password" />
            </label>
        </fieldset>
        <input class="Login" type="button" value="LOG IN"/>
        <a class="ForgotPassword" href="#">Forgot Password?</a>
    </form>
</div>

.header {
    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1; /* inline-block hack for IE7 */
    *display: inline; /* inline-block hack for IE7 */

    h1 {
        padding: 1em 0;
        width: 400px;
        text-align: center;
    }
}

.Fields {
    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
    *display: inline;

    .Label {
        display: inline;
        margin-left: 5px;
        padding-left: 5px;
    }

    .Value {
        display: inline;
        margin-left: 5px;
        padding-left: 5px;
    }

    .Login {
        position: relative;
        padding: 2px 7px;
        .input-button(#fff);
    }

    .ForgotPassword {
        position: absolute;
        top: 35px;
        right: 150px;
        text-decoration: none;
    }
}

<style type="text/css">
h1, div#loginForm * {
    margin: 0;
    padding: 0;
    list-style: none;
}
h1 {
    float: left;
}
div#loginForm {
    float: left;
}
div#loginForm ul li {
    display: inline;
}
</style>

<h1>Header</h1>
<div id="loginForm">
    <ul>
        <li><input type="text" /></li>
        <li><input type="password" /></li>
        <li><input type="submit" /></li>
    </ul>
    <p><a href="#">Forgot Password?</a></p>
</div>