logo标签列表

如何将提交按钮右对齐？

css
3
我有很多带提交按钮的表单，需要将按钮右对齐。 但问题是当我使用"float: right"时，提交元素会被从正常文档流中移除。这意味着表单高度会缩小，底部边框会干扰按钮。
以下是代码：
<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: both的段落）的hack方法。
对于CSS大师来说，这应该是一个简单的问题！
谢谢...
所有这些元素都是内联的，因此我会认为提交按钮在最右边。 - Ibu
在Firefox和Chrome中使用float:right;对我来说并没有改变表单的大小。您能否更具体地说明您希望改变或防止发生的情况？ - Travis J
你想把标签放在文本框的哪个位置？ - JamesB41
@Ibu：当我运行这段代码时，这些元素不会显示为内联。 - Travis J
这是一个解决方案：JSFIDDLE - Ibu
5个回答
7

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

您可以在CSS中添加以下内容：

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

或者针对 form 元素进行操作，根据您认为更合适的方式进行选择。
谢谢jblasco，这是一个热门提示。 - DatsunBing
4
为了使表单（或任何元素）扩展以包含内部浮动，应用“overflow: auto”样式，如CCS 2.1规范的10.6.7段的最后一段所述：
此外，如果元素有任何浮动后代，其底部边缘在元素的底部内容边缘以下，则将增加高度以包括这些边缘。只考虑参与此块格式化上下文的浮动，例如绝对定位的后代或其他浮动中的浮动不会被考虑。
根据同一规范的第10.6.6节，它适用于以下内容之一：
正常流中的块级非替换元素，当'overflow'未计算为'visible'时（除非'overflow'属性的值已传播到视口）。
2

这里是我做的一个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看起来更加时尚。

0

如果我没记错的话，您想要提交按钮在边框内，那么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>
-1
[type=submit]{

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

}
1
虽然这个答案可能是正确和有用的，但最好还是附上一些解释来说明它如何帮助解决问题。如果将来发生了变化（可能与此无关），导致它停止工作并且用户需要了解它曾经是如何工作的，这将特别有用。 - Kevin Brown-Silva
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接