问如何使2个元素与双亲大小保持一致？
EN

Stack Overflow用户

提问于 2011-07-09 05:15:42

回答 1查看 30关注 0票数 0

基本上，这也不是我想要的结果。导航按钮只是向右浮动，而不是停留在它们的父div中。我拥有的HTML是：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>UI Test</title>
    <link type="text/css" rel="stylesheet" href="main.css" />
</head>

<body>
    <div id="container">
        <div id="header">
            <div class="first">
                First column stuff
            </div>

            <div class="second">
                <a href="#" class="nav_button">Current Projects</a>
                <a href="#" class="nav_button">Build New Project</a>
                <a href="#" class="nav_button">Fund Projects</a>
            </div>
        </div>
    </div>
</body>
</html>

我的main.css文件看起来有点像这样：

#header {
    display: block;
    background-color: #2a2626;
    color: #fff;
    border-bottom: 4px solid #000;
    border-top: 8px solid #000;
    padding-top: 8px;
}

.first {
    float: left;
    width: 20%;
}

.second {
    float: right;
}

.clear { clear: both; }

.nav_button {
    background-image: -webkit-gradient(
        linear,
        left bottom,
        right bottom,
        color-stop(0.14, rgb(44,132,145)),
        color-stop(0.79, rgb(103,191,204))
    );
    background-image: -moz-linear-gradient(
        left center,
        rgb(44,132,145) 14%,
        rgb(103,191,204) 79%
    );
    -moz-box-shadow: inset 0 0 8px rgba(255,255,255, 1);
    -webkit-box-shadow: inset 0 0 8px rgba(255,255,255, 1);

    color: white;
    font-family: Pare, Helvetica;
    font-size: 24pt;
    text-align: center;
    text-decoration: none;

    padding: 27px;
}

它是这样做的：http://i.imgur.com/PU400.png，正如你所看到的，高度不是自动调整的，我已经尝试了一段时间了。有人知道问题出在哪里吗？

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2011-07-09 05:20:13

老派的方法:在你的<div class="second">后面放一个清除元素，比如<br style="clear: both" />，强制父元素完全封闭按钮。

更新的学校方法:让你的#header成为overflow: auto。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/6630597

复制

相似问题

问如何使2个元素与双亲大小保持一致？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使2个元素与双亲大小保持一致？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使2个元素与双亲大小保持一致？
EN