float将提交按钮放在div外部 [英] float puts submit button outside of div

问题描述

我的CSS有些问题，我有一个内容ID，然后里面有一个只是填充的类。在填充类中时，我有一个textarea和一个提交按钮。默认情况下，提交按钮在左边：
但是当我去将提交按钮对齐到内容的左侧或右侧，它将会继续，但它也会超出内容，就像它不再是它的一部分：

这些是我的html和css代码

I am having some trouble with my css, I have a content id and then inside that I have a class that is just padding. When inside the padding class, I have a textarea and a submit button. By default, the submit button is on the left: But when I go to align the submit button to either the left or right of the content, it will go ther ebut it will also go outside of the content, like it's not part of it anymore: These are my html and css codes

html：

<div id="content">
        <div class="content-padding">
            <textarea class="content-post" placeholder="Update your status..."></textarea>
            <input type="submit" class="content-submit">
        </div>
    </div>

css：

#content {
    width: 60%;
    background: #dddddd;
    color: #000;
    margin: 0 auto;
    border-radius: 4px;
    margin-bottom: 10px;
    height: auto;

}
.content-padding {
    padding: 10px;
}
.content-post {
    width: 97.5%;
    height: 80px;
    border: 0px;
    background: #fff;
    resize: none;
    padding: 10px;
    outline: none;
    margin-bottom: 5px;
    border-radius: 4px;
}
.content-submit {
    background: #005ddb;
    width: 70px;
    height: 30px;
    border: 0px;
    border-radius: 4px;
    color: #fff;
    outline: none;
    cursor: pointer;
    float: right;
}

我希望有人cal尽快帮我解决这个问题，谢谢！ / p>

I hope someone cal help me fix this as soon as possible, thanks!

推荐答案

您需要触发 .content-padding 的布局或添加一个结算元素。

You need to trigger the layout of .content-padding or add a clearing element.

.content-padding {
    padding: 10px;
    overflow:hidden ; /* minds inside and outside floatting elements, fine if no size given */
}

或者生成清算元素。

or a generated clearing element.

.content-padding:after {
    content:'';
    display:block; /* or whatever else than inline */
   clear:both;
}

详细了解浮动元素： http://css-tricks.com/all-about-floats/

这篇关于float将提交按钮放在div外部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！