Question

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

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.'s answer有效，但如果您想继续使用内联块方法而不是像现在这样使用浮点数，则只需添加：

#wrap {    
    vertical-align: top;
}

CSS不需要的垂直空间

2 个答案: