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

我现在有一个表格是这样的：

现在，我想添加一个复选框和一个文本，让用户接受网站的条款。我希望此复选框和文本位于“发送按钮”的左侧，因此我尝试了以下内容：

<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，并在其中尝试对齐这些元素。但是，正如您所看到的，复选框和文本高于发送按钮。我怎样才能解决这个问题

---

演示在这里：

您可能正在寻找

垂直对齐

CSS属性，请参阅以获得深入讨论。我担心，问题开始于标签文本大小不是100%（复选框元素），可能还有按钮元素中的边框、填充和字体大小-您可能需要进行更长的调整（特别是如果您希望它在缩放时进行合理缩放）。

唯一提示：我查看了您的网站，并概述了您的代码，我看到提交按钮有右浮动，我认为添加一个新的

li

项并将项设置为右浮动可以将项放在提交按钮的左侧，因为您是在提交按钮之后添加项。希望这可以帮助您……

从该选择器中删除

浮动：右

：

form .terms_button button {
    float:right;
}

工作示例（唯一的更改是删除

浮点：右；

）