1

我有两个按钮并排放置，左按钮扩展以填充空间

.left {
  overflow: hidden;
  display: block;
  width: auto;
}
.right {
  float: right;
  width: 34px;
}
<div class="right" />
<div class="left" />

甚至需要很长时间才能正常工作。overflow: hidden最后我想出了正确填充空间所需的左侧。

现在，左侧按钮需要悬停时弹出表单。overflow: hidden问题是当容器具有关联的样式时，我无法显示它。如果没有这种样式，左侧将扩展以填充包括右侧在内的整个空间。我该如何解决这个问题？

弹出代码

#login-flyout form {
    height: 0;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 66px;
    width: 250px;
}
#login-flyout form:hover {
    height: auto;
    opacity: 0;
}

请注意，如果overflow: hidden从容器中删除代码，则代码有效。

另外，这是我的 CSS 经验的基础，关于容器和包含样式，我可以查看任何参考吗？例如，我昨天浪费了 3 个小时试图弄清楚如何div在两个float divs. 原来问题是容器有一个float: right样式，所以中心div需要一个float: none.

4

1 回答 1

0

看看这个解决方案→ http://jsfiddle.net/matbloom/8cYFU/

如果您正在寻找仅支持 CSS 的解决方案，请尝试实施此解决方案。隐藏的飞出需要在悬停元素容器内：

HTML：

<div class="toolbar clearfix">
    <div class="right">
        <span>Right Button</span>
    </div>
    <div class="left">
        <span>Left Button</span>
        <div id="login-flyout">
            <form>
                <input type="text" placeholder="Sample field" /><br />
                <input type="text" placeholder="Sample field" /><br />
                <input type="submit" value="GO &rarr;" />
            </form>
        </div>
    </div>
</div>

CSS：

body, input {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-size: 15px;
    line-height: 15px;
    color: #333;
}

.left, .right {
    cursor: pointer;
    height: 40px;
    display: block;
    background: #ccc;
    overflow: hidden;
    padding: 0 20px;
    line-height: 40px;
}

.left:hover, .right:hover {
    background: #333;
    color: #fff;
}

.left { float: left; }
.right { float: right; }

.toolbar {
    background: #eee;
    display: block;
    position: relative;
    width: 100%;
}

#login-flyout {
    color: #fff;
    position: absolute;
    display: none;
    left: 0;
    top: 40px;
    padding: 20px;
    background: #333;
}

.left:hover #login-flyout { display: block; }

/* Clearfix */

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix {height: 1%;}
于 2013-09-03T19:47:01.403 回答