将浮动的提交按钮放在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;
}

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

- blackhawk338

Answer 1

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

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

- G-Cyrillus

---

看起来很容易，第一个成功了。谢谢！（我会在10分钟内选择答案） - blackhawk338

Answer 2

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

另一个选项是在提交按钮后面在你的标记中添加另一个div。

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

在您的CSS中，您需要添加以下内容。

.clear{
    clear: both;
}

fiddle

- Jmh2013

---

它能够工作，但会添加一个溢出栏，这不是我想要的，因为它看起来很糟糕，谢谢回答。 - blackhawk338

你说得对。我提出了另一个建议并添加了一个 fiddle。 - Jmh2013

Answer 3

您可以在按钮后创建一个带有clear:both样式的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>

浮动属性使元素的高度为零，因此父 div 不会识别元素的高度。

- thiagonobre

Answer 4

试试这个：

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

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

- KJ Price

Answer 5

问题出现的原因是您没有为 #content 设置静态高度。如果您为内容设置了静态高度（填充 + 文本区域 + 提交按钮），并将其设置为 #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.

}

- PugsOverDrugs

---

谢谢你的帮助，我已经解决了。添加静态高度会使情况变得更糟，因为我在 #content div 中用于多个目的，而不仅仅是这一个。但还是感谢你的回答，送上免费的点赞！ - blackhawk338

啊！谢谢！我想我没有抓住正确的上下文:P但在这种特殊情况下，它会修复它:P - PugsOverDrugs