你的位置:首页 > 网页设计

[网页设计]关于html中空格导致的排版问题

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>   <title>#{Security}</title>   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">   <meta http-equiv="X-UA-Compatible" content="IE=edge"/>  <style type="text/css">   html {     height:100%;     margin:0;   }   body {     height:95%;     margin:0;     padding-top: 30px;     padding-left: 60px;   }   select, input[type="text"] {     height: 22px;   }   #lineNum {     width: 60px;   }   .actionTable {     width: 100%;   }     </style></head><body style="margin:0; -moz-user-select:-moz-none;" onselectstart="return $.Util.isSelected(event);" >  <div style='width:850px;'>   <table class="noBorderTable actionTable">     <tr>      <td>        <label>文件:</label>        <select id="file" name="file" style="width: 180px;">         #{files.options}        </select>        <label>行数:</label>        <input id="lineNum" name="lineNum" type="text" value="500" style="width: 120px;" onkeyup='property(event, this);'/>        <label id="errMsg" style="color: red;"></label>        <input id="isAll" name="isAll" type="checkbox" onclick="checkAuditRefresh()" style="text-align:center; vertical-align:middle"/>        <label>全部显示</label>        <input id="refresh" name="auto-refresh" type="checkbox" onclick="checkAuditRefresh()" style="text-align:center; vertical-align:middle"/>        <label>自动刷新</label>      </td>      <td style="text-align: right;">        <input type="button" id="rotate" value="分割文件"/>        <input type="button" id="download" value="下载"/>        <input type="button" id="gainLog" value="刷新"/>      </td>     </tr>    </table>   <div style='width:400px;margin-top:5px;'>   </div>  </div></body></html>

页面效果

image

问题。

如上图,下拉列表的id为“file”,它与“行数”之间的间距为24px。而上图为上述图片,为上述代码的效果图。发现在未对其格式进行特殊设置的时候,页面上下拉列表与“行数”之间就存在间隙。而我如果将</select>与“<label>行数:</label> ”写在同一行且之间无空格,两者之间就不会再有间隙。

结论:它们之间的间隙是因为标签“</select>”与标签“<label>”之间的回车换行或空格导致的。

延伸:如果才能是这一区域内的空格或换行失去作用?