首页 > 代码库 > EasyUI 中当内容多时,出现行距不等,解决方案!!!

EasyUI 中当内容多时,出现行距不等,解决方案!!!

<script type="text/javascript"
 src="http://www.mamicode.com/html/system/xxx/xxx.js"></script>
 
<div class="bye404-tab">
 <div class="easyui-panel bye404-toolbar">
  <a class="easyui-linkbutton"
   data-options="plain:true,iconCls:‘icon-add‘"
   onclick="HeadlineClass.add()">新增</a> <a class="easyui-linkbutton"
   data-options="plain:true,iconCls:‘icon-edit‘,disabled:true,exActive:‘1‘"
   onclick="HeadlineClass.edit()">编辑</a> <a class="easyui-linkbutton"
   data-options="plain:true,iconCls:‘icon-remove‘,disabled:true,exActive:‘n‘"
   onclick="HeadlineClass.remove()">移除</a>
 </div>
 
 <table id="headline-grid" class="easyui-datagrid"   data-options="url:‘homePage/Headline/后台地址‘" >
  <thead >
   <tr style="height:45px">
    <th width="10%" data-options="field:‘id‘">编号</th>
    <th width="20%" data-options="field:‘name‘">头条名称</th>
    <th width="30%" data-options="field:‘url‘">路径</th>
    <th width="70%" data-options="field:‘content‘">内容</th>
   </tr>
  </thead>
 </table>
 
 <!-- 添加框  -->
 <div id="headline-dialog" class="easyui-dialog" style="width:1200px;height:600px;" data-options="closed:‘true‘">
  <form id="headline-form" class="bye404-dialog-form">
   <input type="hidden" name="id" value="" />
   <table>
    <tr>
     <th>头条名称:</th>
     <td><input name="name" id="name" class="easyui-validatebox"></td>
    </tr>
    <tr>
     <th>url:</th>
     <td><input name="url" id="url" class="easyui-validatebox"></td>
    </tr>
    <tr >
     <th>内容:</th>
     <td>
      <!-- 使用百度编译器  ueditor -->
      <textarea name="content" id="content"></textarea>
     </td>
    </tr>
   </table>
  </form>
  <div id="bye404-dialog-buttons">
   <a class="easyui-linkbutton" data-options="iconCls:‘icon-ok‘"
    onclick="HeadlineClass.save()">提交</a> <a class="easyui-linkbutton"
    data-options="iconCls:‘icon-cancel‘"
    onclick="$(‘#headline-dialog‘).dialog(‘close‘)">取消</a>
  </div>
 </div>
</div>

<div id=‘loadingDiv‘
 style=‘position: absolute; z-index: 1000; top: 0px; left: 0px; width: 100%; height: 100%; background: white; text-align: center;‘>
 <h1 style=‘top: 48%; position: relative;‘>
  <font color=‘#15428B‘>努力加载中···</font>
 </h1>
</div>

 

加入以下代码,则不会出现行宽不齐的问题。。。
<style>
.datagrid-cell datagrid-cell-c1-content
.datagrid-row
{height: 45px;}
.datagrid-row p{
 display:inline-block;
}
datagrid-cell{overflow:none;}
</style>

EasyUI 中当内容多时,出现行距不等,解决方案!!!