0

我遇到了一个奇怪的 CSS 问题。下面是我的html

<div id="contact-me-content">

    <form action="" method="post">

        <label for="contact-name">Name</label>
        <input type="text" name="contact-name" id="contact-name" placeholder="Your name" />

        <input type="submit" style="float:right" name="contact-submit" id="contact-submit" value="Send" />
        <div style="clear:both"></div>

    </form>
</div>

下面是css

#contact-me-content
{
height: 0;
padding: 5px;
background: #ffffff;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
}

我将提交按钮向右浮动，然后尝试清除浮动，以便表单包含在父 div 中。因为父 div 有 height:0 清除不工作。但是，如果我删除 height: 0 它工作正常。有谁知道解决这个问题或可以给我一个解释？

谢谢

4

2 回答 2

2

为了工作，你应该尝试添加display: inline-block;，#contact-me-content然后只有你的浮动元素可以有clear: both;

于 2013-03-17T03:34:26.627 回答
1

而不是height: 0用来隐藏你可以使用的 divdisplay: none或visibility: hidden. 如果您必须使用height: 0，那么还要添加overflow: hidden到容器中，并且表单中溢出的任何部分都将被隐藏。请注意，填充使其具有一定的可见性，因此您可以将其设置为 0 并稍后将其添加回来，或者将填充添加到表单元素中。

http://jsfiddle.net/ExplosionPIlls/BQCqJ/

于 2013-03-16T23:59:09.737 回答