Question

我正在创建一个带有一些样式的简单菜单，但我有一个问题，我试图获得包装（中间的白色背景包含标题并且 nav_bar ）从其父级继承宽度 - 容器（具有蓝色背景的容器），但是当我设置包装器的宽度 to“inherit”，它不会继承它，但是在我将它改为“100％”后，它确实从容器继承，为什么呢？有人可以向我解释一下吗？

提前感谢任何人，非常感谢您的帮助。

这是我写的代码：

HTML：

        <!DOCTYPE html>
<html>
<head>
    <title>Menu bar best practice</title>
    <link type="text/css" rel="stylesheet" href="navbar_example.css" />
    <link href='http://fonts.googleapis.com/css?family=Roboto:300italic' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
</head>
<body>
    <div id="global_header">
        <div id="container">
            <div id="wrapper">
                <div id="title"><p>title</p></div>
                <nav id="nav_bar">
                    <p>nav_bar</p>
                </nav>
            </div>
        </div>
    </div>
</body>
</html>

CSS：

* {
margin: 0;
padding: 0;
}
@font-face {
font-family: Roboto;
src: url(Roboto-Light.ttf);
}

#global_header {
width: 100%;
height: 100px;
background: grey;
overflow: hidden;
}

#container {
width: 70%;
height: inherit;
margin: 0 auto;
padding: 30px 0 30px 0;
background-color:  blue;
}

#wrapper {
width: 100%;
height: 30px;
margin: 0;
background-color: white;
}

#title {
width: 20%;
height: inherit;
margin-right: 5%;
background-color: pink;
float: left;
}

#nav_bar {
width: 75%;
height: inherit;
float: right;
background-color: black;
}

p {
color: red;
}

这是我得到的结果

为什么宽度继承工作但宽度：100％工作？

0 个答案: