Question

我的css遇到了一些麻烦，我有一个内容ID，然后在里面我有一个只是填充的类。在填充类中，我有一个textarea和一个提交按钮。默认情况下，提交按钮位于左侧： enter image description here 但是，当我将提交按钮对齐到内容的左侧或右侧时，它会继续，但它也将超出内容，就像它不再是它的一部分：这些是我的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;
}

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

Answer 2

在您的CSS中overflow: auto下添加#content。

另一种选择是在提交按钮后立即在标记中添加另一个div。

<div class="clear"></div>

在CSS中，您将添加以下内容。

.clear{
    clear: both;
}

fiddle

Answer 3

您可以使用clear创建一个div：按钮后面的两种样式：

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

float属性使元素的高度为零，然后父div不识别元素的高度。

Answer 4

试试这个：

#content:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
}

来自http://css-tricks.com/snippets/css/clear-fix/。

Answer 5

问题出现是因为您没有为#content设置静态高度。如果为内容设置静态高度（padding + textArea + submitButton）并将其设置为#content的高度，那么它将为所有内容提供空间。

#content {
width: 60%;
background: #dddddd;
color: #000;
margin: 0 auto;
border-radius: 4px;
margin-bottom: 10px;
height: 140px; //Play with this number to get it perfect.

}

float将提交按钮放在div之外

5 个答案: