html - float 将提交按钮放在 div 之外

Question

我的 css 有一些问题，我有一个内容 ID，然后在其中有一个只是填充的类。在填充类中时，我有一个文本区域和一个提交按钮。默认情况下，提交按钮在左侧: 但是当我将提交按钮与内容的左侧或右侧对齐时，它会去那里但它也会超出内容，就像它不再是内容的一部分一样: 这些是我的 html 和 css 代码

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

希望有人能尽快帮我解决这个问题，谢谢!

Answer 1

需要触发.content-padding的布局或者添加清空元素。

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

或生成的清算元素。

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

了解有关 float 元素的更多信息:http://css-tricks.com/all-about-floats/