2

我有一个现在看起来像这样的表格：

当前形式

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

<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 并在里面尝试对齐这些元素。但是，如您所见，复选框和文本高于发送按钮。我该如何解决这个问题？

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

4

3 回答 3

1

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

form .terms_button button {
    float:right;
}

工作示例（唯一的变化是删除float: right;） http://jsfiddle.net/ag44K/22/

于 2012-11-04T00:36:25.440 回答
0

CSS 属性是vertical-align您可能正在寻找的，请参阅W3.org上的 CSS2 规范以进行深入讨论。恐怕麻烦开始了，标签文本大小不是 100%（复选框元素的），并且可能还与按钮元素中的边框、填充和字体大小有关——您可能需要进行一些更长时间的调整（特别是如果您希望它在缩放时合理缩放）。

于 2012-11-03T21:22:07.393 回答
0

唯一提示：我查看您的网站并概述您的代码，我看到提交按钮具有浮动右侧，我相信添加一个新li项目并将项目设置为浮动右侧它可以将项目放在提交的左侧按钮，因为您要在提交按钮之后添加项目。希望这可以帮助你...

于 2012-11-03T21:23:29.807 回答