首页 > 网站 > WEB开发 > 正文

关于html中空格导致的排版问题

2024-04-27 14:27:28
字体:
来源:转载
供稿:网友
关于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>”之间的回车换行或空格导致的。

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


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表