Question

快速了解我正在努力实现的目标;

我正在制作一个带有两个子元素的浮动（左）侧导航栏，第一个是可点击的图标，它位于静态位置，将第二个孩子的宽度设置为父级宽度的0到100％。

我想弄清楚为什么将第二个孩子的宽度设置为0％/ 0什么都没有，我只能假设我在这里错过了一些非常简单的东西。

#header{
    float:left;
    position:fixed;
    background:#333;
    min-height:100%;
    overflow:hidden;
    z-index:1;
    width:80px;}

#toggle-menu{
    background:url(http://i.imgur.com/EQiq0zb.png) no-repeat;
    width:50px;
    height:50px;
    background-size:cover;
    margin:15px 15px;}

#nav{width:0%;}

感谢你提前帮助这个noobie，

杜德

Answer 1

你只是错过了这个：）

#nav{width:0%; overflow:hidden;}

Answer 2

#nav {display: none;}当悬停在父级上时，请将其设置为display: block;

jsfiddle：https://jsfiddle.net/mjqym5c4/2/

body,wrapper{min-height:100px;padding:0;margin:0;font-family: 'Roboto', sans-serif;}
body{background-color:#999;}

#header{
	float:left;
	position:fixed;
	background:#333;
	min-height:100%;
	overflow:hidden;
	z-index:1;
	width:80px;
}

#header:hover{
	width:200px;
}
#header:hover #nav {
  display: block;
}
#nav {
  display: none;
}

#toggle-menu{
	background:url(http://i.imgur.com/EQiq0zb.png) no-repeat;
	width:50px;
	height:50px;
	background-size:cover;
	margin:15px 15px;
}

#nav{width:0%;}
#nav ul{display:inline;list-style:none;}
#nav ul li{text-align:left;padding:0 15px;}
#nav ul li a{text-shadow:0 1px 2pt black;color:#fff;text-decoration:none;text-transform:uppercase;}


#banner{width:960px;margin: 0 auto;min-height:100px;background:#333;}
#content{width:960px;margin:0 auto;min-height:1000px;background:#666;}

<body>
  <div id="wrapper">
    <div id="header">
      <div id="toggle-menu"></div>
      <div id="nav">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Gallery</a></li>
          <li><a href="#">Drive</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </div>
    <!-- /header -->
    <div id="banner">
    </div>
    <div id="content">
    </div>
    <!-- /content -->
    <div id="footer">
    </div>
    <!-- /footer -->
  </div>
  <!-- /wrapper -->
</body>

为了回答你的问题，为什么width: 0;没有做任何事情，是因为文字不会变小。为此，您将使用font-size: 0;。但文本仍然存在。

给孩子div 0宽度？

2 个答案: