li或dd 浮动后增加图片时高度多出3-5px的问题

转载的,确实能解决问题,原因不明,求指教,谢谢!

本人实验,chrome下多出3px,firefox下多出5px

li或dd 浮动后增加图片时高度多出3-5px的问题

dd或li或a标签内,插入图片后,下方会增加4PX高度(间距),解决方法:
1.将图像定义成block (display:block)
2.给dd或li固定高度,然后overflow:hidden
3.设置 ul 的 font-size:0;
4.设置 img 的 vertical-align: bottom;
5.设置 img 的 margin-bottom: -4px;

其中第4个方法一般是为了解决li里面有双浮动:

  • 111111
    比如这里a和span一个浮左一个浮右的时候,li下方就会多出3PX左右的空隙,所以要用到vertical-align: bottom;或hack来解决

转载于:https://www.cnblogs.com/sleepyy/p/3335122.html

<body class="bodystyle"> <div id="append_parent"></div> <div id="ajaxwaitid"></div> <div class="page atta"> {include file="seo/bar" /} <div class="seo-right {if condition=&#39;2 != $config.seo_pseudo&#39;}none{/if}" id="seo_right_uphtml"> <style> .seo-right{ right: 30px; width: 90%; background-color:#fff; z-index:666666; border-radius: 4px; height: 810px; } .seo-html dt.tit { width: 60px; padding-left:20px; } </style> <style> li { list-style: none; } .box { position: relative; display: inline; left: 150px; } .top { height: 20px; position: relative; margin-bottom:20px; } .top input { width: 100px; height: 20px; font-size: 25px; padding: 0 20px; border: 1px solid #d1ccd0; outline: none; } .top .blue { border: 2px solid #409eff;; } .top .size { width: 16px; height: 16px; position: relative; top: 50%; left: -30px; margin-top: -8px; transform: rotate(180deg); transition: all .5s; color: #d1ccd0; } .top ul { position: absolute; display:flex; font-size: 10px; top: 50%; transform: translateY(-50%); left: 15px; z-index: 99; } .top ul li { border-radius: 5px; display: none; margin-top: 20px; font-size: 14px; } .arr1{ margin-left: 20px; } .list { width: 100%; height: 430px; margin-top: 5px; background-color:#fff; /* 超出隐藏,需要加滚动条*/ overflow: auto; position: relative; display: block; z-index:99; } /* 隐藏滚动条 */ .list::-webkit-scrollbar { display: none; } .list-ul { width: 100%; } .header{ background-color: #f7f7f7; clear: both; position: relative; z-index: 1; } .header th{ white-space: nowrap; cursor: default; border-right: 2px solid #fff; box-sizing: border-box; line-height: 35px; } .list-ul > span { flex: 0 0 33.33%; box-sizing: border-box; min-width: 300px; } .list ul { display: flex; flex-direction: column; margin: 8px 0; } .list ul li { display: flex; height: 27px; align-items: center; padding: 0 10px; color: #65676b; cursor: pointer; } .list ul li:hover { background-color: #f5f8ff; } .list ul li label { font-size: 10px; margin-left: 15px; display: block; width: 100%; } .fontBlue { color: #0075ff; } #input1{ width: 300px; height: 30px; padding-right: 6px; padding-left: 6px; padding-top: 4px; padding-bottom: 4px; border: 1px solid #d1ccd0; border-radius: 4px; font-size: 14px; color: #333; margin-bottom: 10px; } #searchInput { width: 136px; height: 20px; padding-right: 6px; padding-top: 4px; padding-bottom: 4px; border: 1px solid #d1ccd0; border-radius: 4px; font-size: 14px; color: #333; margin-right: 20px; } #path-select,#online-status-select,#domain-type-select{ width: 150px; height: 30px; padding-right: 6px; padding-top: 4px; padding-bottom: 4px; border: 1px solid #d1ccd0; border-radius: 4px; font-size: 14px; color: #333; margin-right: 20px; margin-bottom:10px; } table { border-collapse: collapse; } tr { border-bottom: 1px solid #f7f7f7; line-height: 48px; } #temp-select, #temp-type-select{ width: 150px; height: 30px; padding-right: 6px; padding-top: 4px; padding-bottom: 4px; border: 1px solid #d1ccd0; border-radius: 4px; font-size: 14px; color: #333; margin-right: 20px; margin-bottom: 10px;; } #queryButton{ min-height: 20px; padding: 5px 15px; font-size: 12px; border-radius: 3px; } .partial-upload{ margin-left: 10px; padding: 7px 19px!important; } </style> <div class="page" style="padding: 0px 15px 30px"> <form method="get" id="html_handlepost" name="form2"> <div class="ncap-form-default seo-html" style="display: relative;padding: 10px 0px 30px;"> <dl class="row" style="margin-top: 0px"> <dt class="tit" style="height: 30px;font-size:18px;display:block;"> <label>全部域名:</label> </dt> <div class="template_input" style="font-size: 16px;position: relative;left:150px;display:inline-block;margin-bottom:27px;"> <em style="color:#F60;font: bold 14px/20px tahoma, verdana;">*</em> <span>提交template资源文件:</span>   <label for="seo_upload_all_yes" class="curpoin"> <input type="radio" id="seo_upload_all_yes" name="seo_upload_all" value="1"> 是 </label> <label for="seo_upload_all_no" class="curpoin"> <input type="radio" id="seo_upload_all_no" name="seo_upload_all" value="0" checked> 否 </label> <a href="javascript:void(0);" id="up_site" class="partial-upload ncap-btn ncap-btn-green" style="margin-left: 90px;">一键生成全部域名并上传到s3</a> </div> <dd class="opt w0" style="position:relative;left:150px;"> <span class="err"></span> <p class="notic"></p> </dd> </dl> <dl class="row" style="border-top: 1px solid rgb(238,238,238);background-color:#fff;padding-top:23px;display:inline-block;width:100%;margin-bottom:20px;"> <dt class="tit" style="height: 30px;font-size:18px;display:block;">部分域名:</dt> <div class="template_input" style="font-size: 16px;position: relative;left:150px;display:inline-block;margin-bottom:30px"> <em style="color:#F60;font: bold 14px/20px tahoma, verdana;">*</em> <span>提交template资源文件:</span>   <label for="seo_upload_yes" class="curpoin"> <input type="radio" id="seo_upload_yes" name="seo_upload" value="1"> 是 </label> <label for="seo_upload_no" class="curpoin"> <input type="radio" id="seo_upload_no" name="seo_upload" value="0" checked> 否 </label> <a href="javascript:void(0);" id="up_article_multiple" class="ncap-btn ncap-btn-green partial-upload" style="margin-left: 90px;">一键生成所选域名并上传到s3</a> <a href="javascript:void(0);" id="down_article_multiple" class="ncap-btn ncap-btn-green partial-upload" style="margin-left: 45px;">一键下线所选域名</a> </div> <div class="top" style="left:150px;margin-bottom:19px;display: inline-block;margin:0px;"> <input type="text" name="" id="input1" style="display:none;"> <input type="text" id="searchInput" placeholder="域名名称"> <select id="path-select"> <option value="0">域名类型</option> <option value="1">一级</option> <option value="2">二级</option> </select> <select id="online-status-select"> <option value="0">是否上线</option> <option value="1">是</option> <option value="2">否</option> </select> <select id="domain-type-select"> <option value="0">域名类型</option> <option value="1">游戏</option> <option value="2">电商</option> <option value="3">资讯 - 金融</option> <option value="4">资讯 - 科技</option> </select> <select id="temp-type-select"> <option value="0">模板类型</option> <option value="1">info</option> <option value="2">game</option> <option value="3">ecommerce</option> </select> <select id="temp-select"> <option value="0">模板名称</option> </select> <button type="button" id="queryButton">查询</button> <ul style="display:none;"> <li class="change"></li> <li class="arr1"></li> </ul> </div> <dd class="opt w0" style="margin: 30px;"> <div class="box hDivBox"> <div class="list hDiv"> <div class="list-ul hDivBox" style=" overflow-x: auto; width:1500px;"> <table class="header" cellpadding="0" cellspacing="0" style="width: 100%;"> <thead> <tr> <th class="sign w50" axis="col0"> <div class="tc"><input type="checkbox" onClick="toggleCheckboxes(this)" autocomplete="off"></div> </th> <th axis="col3" class="w300"> <div class="sundefined tc">域名名称</div> </th> <th axis="col1" class="w100"> <div class="tc">二级域名</div> </th> <th axis="col1" class="w100"> <div class="tc">上线状态</div> </th> <th axis="col1" class="w160"> <div class="tc">多级目录地址</div> </th> <th axis="col2" class="w160"> <div class="tc">域名类型</div> </th> <th axis="col2" class="w160"> <div class="tc">模板类型</div> </th> <th axis="col2" class="w200"> <div class="tc">模板名称</div> </th> <th axis="col1" class="w200"> <div class="tc">创建间</div> </th> <th axis="col1" class="w200"> <div class="tc">上次修改间</div> </th> </tr> </thead> </table> <table class="flex-table autoht" cellpadding="0" cellspacing="0" border="0" id="arctype_table" style="width: 100%"> <tbody class="flex-tbody"></tbody> </table> </div> </div> </div> <p class="notic"></p> </dd> </dl> <dl class="row" style="display: none;"> <dt class="tit">栏目页</dt> <dd class="opt w0"> <select name="html_typeid" id="html_typeid" style="width: 150px;"> <option value="0">所有栏目&hellip;</option> {$select_html} </select>  <a href="javascript:void(0);" id="up_channel" class="ncap-btn ncap-btn-green">一键生成</a> <p class="notic"></p> (功能已弃用) </dd> </dl> </div> </form> </div> 这个dd元素已经超出了我的整体范围,导致有一些内容变的不可见了,所以我现在应该怎么办 dd class="opt w0" style="margin: 30px;">
08-06
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值