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

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

唯一的提示：我看一下您的网站，我概述了您的代码，我看到commit按钮的Float Right，我相信添加一个新的li项并将它设置为float Right可以将其放在项目的左侧提交按钮，因为您要在“提交”按钮之后添加项目。 希望这可以帮助您...