Css 如何右对齐此提交按钮？_Css

Css 如何右对齐此提交按钮？

css

Css 如何右对齐此提交按钮？,css,Css,我有大量的表单和提交按钮，我需要右对齐按钮。问题是，当我使用float:right时，提交元素被从正常文档流中删除。这意味着表单的高度会降低，其底部边框会干扰按钮代码如下： <html> <head> <style type="text/css"> #left-col { width: 290px; } #loginForm { border: 1px s

我有大量的表单和提交按钮，我需要右对齐按钮。问题是，当我使用

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>


#左列{
宽度：290px；
}
#登录表单{
边框：1px纯黑；
}   
#提交{
/*浮动：对*/
}
电子邮件
密码

表单是以编程方式生成的（使用Zend_表单），因此我希望避免需要额外元素（例如带有clear:both的段落）

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

谢谢…

您可以使用CSS

：after

伪元素清除容器，而无需添加任何额外的HTML标记

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

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

或者到

表单

元素，以您认为更合适的方式。

这里是我制作的一个JSFIDLE演示-，展示您应该如何实现您想要的

演示中使用的代码副本：

<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>


#左列{
宽度：290px；
}
#登录表单{
边框：1px纯黑；
}   
#提交{
/*浮动：对*/
}
标签{
显示：块；
}
电子邮件
密码

注意：我使用的内联样式可以转换为CSS

class

。我还为

标签添加了一条规则

，因此它看起来更有风格。

如果我没有弄错的话，那么您希望提交按钮位于边框内


#左列{
宽度：290px；
}
#登录表单{
边框：1px纯黑；
}   
#提交{
/*浮动：对*/
}
电子邮件
密码

要使表单（或任何元素）展开以包含内部浮动，请按照以下内容的最后一段应用“溢出：自动”样式：

此外，如果元素有任何浮动子体，其底部边距边缘低于元素的底部内容边缘，则高度将增加以包括这些边缘。仅考虑参与此块格式上下文的浮点，例如绝对定位子体内的浮点或其他浮点不考虑

根据第10.6.6节。除其他事项外，该规范适用于：

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

所有这些元素都是内联的，所以我认为提交应该在最右边；在FF和chrome中，没有为我更改窗体的大小。您能更具体地说明您希望更改或阻止的内容吗？您希望文本框相关的标签在哪里？@Ibu:当我运行此代码时，这些元素不会显示为内联。这里有一个解决方案：感谢jblasco，这是一个热门话题，尽管这个答案可能是正确和有用的，如果您随附一些解释，以解释它如何帮助解决问题，则最好是这样。如果有一个变化（可能是无关的）导致它停止工作，并且用户需要了解它曾经是如何工作的，那么这在将来变得特别有用。

<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>

[type=submit]{

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

}