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，我尝试对齐这些元素。但是，您可以看到复选框和文本高于“发送”按钮。我该如何解决这个问题？

演示在这里：Not aligned checkbox with Send button

Answer 1

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

form .terms_button button {
    float:right;
}

工作样本（唯一的变化是移除float: right;） http://jsfiddle.net/ag44K/22/

Answer 2

vertical-align CSS属性是您可能正在寻找的内容，请参阅CSS2 specification at W3.org进行深入讨论。麻烦开始了，我担心，标签文本大小不是100％（复选框元素），也可能是按钮元素中的边框，填充和字体大小 - 你可能会进行一些更长时间的调整（特别是如果你想让它在变焦时合理地缩放）。

Answer 3

只提示：我看看你的网站，我概述你的代码，我看到提交按钮有浮动权限，我相信添加一个新的li项目并设置项目浮动它可以放由于您要在“提交”按钮后添加项目，因此“提交”按钮左侧的项目。希望这可以帮助你...

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

3 个答案: