Question

对于带有提交按钮的表单，我有一个很大的数字，我需要右键对齐按钮。问题是，当我使用float: right时，submit元素将从正常文档流中取出。这意味着表单的高度会降低，然后它的底部边框会干扰按钮。

以下是代码：

<html>
<head>
    <style type="text/css">
        #left-col {
            width: 290px;
        }
        #loginForm {
            border: 1px solid black;
        }   
        #submit {
            /* float: right; */
        }

    </style>
</head>
<body>
    <div id="left-col">
        <div id="loginForm">
            <form id="user-login-form" enctype="application/x-www-form-urlencoded" method="post" action="">
                <label for="email" class="required">Email</label>
                <input type="text" name="email" id="email" value="">
                <label for="password" class="required">Password</label>
                <input type="password" name="password" id="password" value="">
                <input type="submit" name="submit" id="submit" value="Login" class="submit">
            </form>
        </div>
    </div>
</body>
</html>

表单是以编程方式生成的（使用Zend_Form），因此我希望避免需要其他元素的黑客（例如带有clear的段落：两者）。

希望这对CSS大师来说是一个简单的问题！

...谢谢

Answer 1

您可以使用CSS :after伪元素清除容器，而无需添加任何额外的HTML标记。

你可以在你的CSS中添加这样的东西：

#loginForm:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

或form元素，无论您认为哪个更合适。

Answer 2

要使表单（或任何元素）展开以包含内部浮点数，请按照10.6.7 of the CCS 2.1 spec的最后一段应用“overflow：auto”样式：

此外，如果元素具有任何浮动后代，其底部边缘位于元素的底部内容边缘下方，则增加高度以包括这些边缘。仅考虑参与该块格式化上下文的浮动，例如，在绝对定位的后代内部浮动或其他浮动不是。

根据第10.6.6节。同样的规范，除其他外，它适用于：

当'溢出'不计算为'可见'时，正常流程中的块级非替换元素（除非'溢出'属性的值已传播到视口）。

Answer 3

这是我制作的一个jsFiddle演示 - http://jsfiddle.net/tm8bY/1/ - 展示你应该如何实现你想要的。

演示中使用的代码副本：

<html>
<head>
    <style type="text/css">
        #left-col {
            width: 290px;
        }
        #loginForm {
            border: 1px solid black;
        }   
        #submit {
            /* float: right; */
        }
        label {
            display: block;
        }
    </style>
</head>
<body>
    <div id="left-col">
        <div id="loginForm">
            <form id="user-login-form" enctype="application/x-www-form-urlencoded" method="post" action="">
                <label for="email" class="required">Email</label>
                <input type="text" name="email" id="email" value="">
                <label for="password" class="required">Password</label>
                <input type="password" name="password" id="password" value="">
            </div>
            <div style="text-align: right">
                <input type="submit" name="submit" id="submit" value="Login" class="submit">
            </form>
        </div>
    </div>
</body>
</html>

_{注意：我使用的内联样式可以转换为CSS class。我还为label添加了一条规则，因此它看起来更有风格。}

Answer 4

如果我没弄错的话你想要边框内的提交按钮 http://jsfiddle.net/bTp2K/1/

<html>
<head>
    <style type="text/css">
        #left-col {
            width: 290px;
        }
        #loginForm {
            border: 1px solid black;
        }   
        #submit {
            /* float: right; */
        }

    </style>
</head>
<body>
    <div id="left-col">
        <div id="loginForm">
            <form id="user-login-form" enctype="application/x-www-form-urlencoded" method="post" action="">
                <label for="email" class="required">Email</label>
                <input type="text" name="email" id="email" value="">
                <label for="password" class="required">Password</label>
                <input type="password" name="password" id="password" value="">
            </div>
                <div style="text-align: right">
                <input type="submit" name="submit" id="submit" value="Login" class="submit">
            </form>
        </div>
    </div>
</body>
</html>

Answer 5

[type=submit]{

    margin-left: 121px;
    margin-top: 19px;
    width: 84px;
    height: 40px;   
    font-size:14px;
    font-weight:700;

}

如何正确对齐此提交按钮？

5 个答案: