css - CSS不需要的垂直空间

Question

当我在 'wrap' div 中输入多行内容时，它会在 div 的底部创建垂直空间。我怎样才能防止这种情况？

截屏

JSFiddle

HTML

<div id="widgets">
  <div id="wrap">
   <h1 class="name" >Models</h1>
     <li><a href="">Rename a column</a></li>
     <li><a href="">git add all new or modified files</a></li>
     <li><a href="">Heroku assets:precompile plugin </a></li>
     <li><a href="">Heroku tail logs</a></li>
     <li><a href="">Rename a column</a></li>
     <li><a href="">Heroku load db:schema </a></li>
     <li><a href="">Heroku: connect to database </a></li>
     <li><a href="">Postgres: show tables</a></li>
     <li><a href="">git switch to a branch </a></li>
     <li><a href="">add records from console </a></li>
  </div>
</div>

CSS

#widgets {
margin: 15px 0px 50px 15px;
text-align: center;
}

#wrap {  
margin: 15px 15px 0px 0px;
text-align: left;
width: 300px;
height: 300px;
padding: 1px 20px 5px 20px;
background: #ffffff;
border: 1px solid #fff;
border-radius: 5px;
display: inline-block;
}

Answer 1

只需将 float: left 添加到您的#wrap css 声明中。更新了 jsFiddle。

#wrap { float: left; }

Answer 2

@Arman P. 的答案有效，但如果您想继续使用 inline-block 方法而不是像现在这样的浮动，您可以添加以下内容：

#wrap {    
    vertical-align: top;
}