<!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='850px;'> <table class="noBorderTable actionTable"> <tr> <td> <label>文件:</label> <select id="file" name="file" style=" 180px;"> #{files.options} </select> <label>行数:</label> <input id="lineNum" name="lineNum" type="text" value="500" style=" 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='400px;margin-top:5px;'> </div> </div> </body></html>
页面效果
问题。
如上图，下拉列表的id为“file”，它与“行数”之间的间距为24px。而上图为上述图片，为上述代码的效果图。发现在未对其格式进行特殊设置的时候，页面上下拉列表与“行数”之间就存在间隙。而我如果将</select>与“<label>行数:</label> ”写在同一行且之间无空格，两者之间就不会再有间隙。
结论：它们之间的间隙是因为标签“</select>”与标签“<label>”之间的回车换行或空格导致的。
延伸：如果才能是这一区域内的空格或换行失去作用？