猿问

标签字太多将图片向上顶,求解决

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>简单的文件树效果</title>
<meta content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.min.js"></script>
<style type="text/css">
  .mould{
    width: 120px;
    height: 160px;
    display: inline-block;
    margin:0px 10px 30px 10px;
    font-size: 12px;
    text-align: center;
  }
  .mould img{
    border: 1px solid black;
  }
  .mould span{

  }
</style>
</head>
<body>
  <div>
    <div id="list">
       <div class="mould">
        <img height="120" width="120" src="folder.png">
        <input type="checkbox">
        <span>大法师打发打发是打发打萨达</span>
       </div>
       <div class="mould">
        <img height="120" width="120" src="folder.png">
        <input type="checkbox">
        <span>大法师</span>
       </div>
    </div>
  </div>
</body>
</html>

需求:打开页面会看见,两个图片不在一个水平线上,原因为下面的span标签字体过多导致将图片向上顶,这里面标签可以随便换,样式随便写,只要能满足两个图片平齐就好


米脂
浏览 305回答 4
4回答

Smart猫小萌

&nbsp;将display:&nbsp;inline-block;换成float:left
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答