对齐复选框和另外两个元素，就好像它们是一条线一样

Question

我的表格如今看起来像这样：

当前表格

现在，我想添加一个复选框和一个文本，让用户接受网站的条款。我希望此复选框和文字在"发送按钮"的左侧，因此这是我尝试过的：

<form action="#" method="post" id="form" class="accept_form" style="display: block; ">
    <fieldset> 
        <div class="mail_from"> 
            <label for="from">Name</label> 
            <input class="mail" type="text" name="from" id="from"> 
        </div> 
        <div class="mail_to"> 
            <label>Last name</label> 
            <input class="mail" type="text" > 
        </div> 
        <div class="message"> 
            <label>Comment</label> 
            <textarea>I love this page, so I sign up</textarea> 
        </div> 
        <div class = "terms_button">
        <input type = "checkbox" name = "agree">
        <label for = "agree"> Accept the terms </label>
        <button type="submit">Send</button>
        </div>
    </fieldset>
</form>​​​​​​​​​​​​​​​​​​​​​​

因此，基本上我创建了一个新的Div，在内部我试图将这些元素对齐。但是，如您所见，复选框和文本比发送按钮更高。我该如何解决？

演示在这里：未与发送按钮对齐复选框

Answer 1

从此选择器中删除float: right：

form .terms_button button {
    float:right;
}

工作样本（唯一的更改是删除float: right;）http://jsfiddle.net/ag44k/22/

Answer 2

vertical-align css属性是您可能要寻找的，请参见W3.org的CSS2规范进行深入讨论。恐怕，麻烦开始了，标签文本大小不是100％（复选框元素的），并且可能在按钮元素中使用边框，填充和字体大小 - 您可能会进行一些更长的调整（特别是如果您希望它在缩放时明智地扩展）。

Answer 3

唯一提示：我查看您的网站，然后概述您的代码，我看到提交按钮正确，我相信添加一个新的li项目并设置该项目float右图，它可以将项目放在提交按钮的左侧，您将在"提交"按钮之后添加项目。希望这对您有帮助...