首页 > 代码库 > inline元素设置display:inline-block存在空隙问题
inline元素设置display:inline-block存在空隙问题
<html> <header> <title>A标签display为inline-block后中间空格问题</title> <style> .motifline-inline a{ border: 1px solid red; } .motifline-display a{ display: inline-block;/* 现代浏览器 +IE6、7 inline 元素 */ *display:inline;/* IE6、7 block 元素 */ *zoom:1; width: 60px; line-height: 30px; border: 1px solid red; text-align: center; text-decoration: none; } /* font-size:0; 让多余的空白符消失,同时需要子元素显示则加上font-size:12px */ .resolve-solution{ font-size: 0; } .resolve-solution a{ font-size: 16px; } .motifline-float{ overflow: hidden; } .motifline-float a{ float: left; width: 60px; line-height: 30px; border: 1px solid red; text-align: center; text-decoration: none; } .motifline-block div{ display: inline-block; width: 60px; line-height: 30px; border: 1px solid red; text-align: center; text-decoration: none; } </style> </header> <body> <p> line元素允许空白符的出现，同时换行，空格，制表等都属于空白符。 display:inline-block;将对象呈递为内联对象，但是对象的内容作为块对象呈递，旁边的内联对象会被呈递在同一行内。 <p> <p>内联元素空白符会产生空隙</p> <p class="motifline-inline"> <a id="ctm_tour_index_0" href="javascript:;" data-poiid="" data-name="海岛">海岛</a> <a id="ctm_tour_index_1" href="javascript:;" data-poiid="" data-name="古镇">古镇</a> <a id="ctm_tour_index_2" href="javascript:;" data-poiid="" data-name="漂流">漂流</a> <a id="ctm_tour_index_3" href="javascript:;" data-poiid="" data-name="滑雪">滑雪</a> <a id="ctm_tour_index_4" href="javascript:;" data-poiid="" data-name="温泉">温泉</a> <a id="ctm_tour_index_5" href="javascript:;" data-poiid="" data-name="亲子游">亲子游</a> <a id="ctm_tour_index_0" href="javascript:;" data-poiid="" data-name="海岛">海岛</a> <a id="ctm_tour_index_1" href="javascript:;" data-poiid="" data-name="古镇">古镇</a> <a id="ctm_tour_index_2" href="javascript:;" data-poiid="" data-name="漂流">漂流</a> <a id="ctm_tour_index_3" href="javascript:;" data-poiid="" data-name="滑雪">滑雪</a> <a id="ctm_tour_index_4" href="javascript:;" data-poiid="" data-name="温泉">温泉</a> <a id="ctm_tour_index_5" href="javascript:;" data-poiid="" data-name="亲子游">亲子游</a> </p> <p>1：所有内联元素写在一行，出去换行/制表/多个空格等空白符</p> <p class="motifline-display"> <a id="ctm_tour_index_0" href="javascript:;" data-poiid="" data-name="海岛">海岛</a><a id="ctm_tour_index_1" href="javascript:;" data-poiid="" data-name="古镇">古镇</a><a id="ctm_tour_index_2" href="javascript:;" data-poiid="" data-name="漂流">漂流</a><a id="ctm_tour_index_3" href="javascript:;" data-poiid="" data-name="滑雪">滑雪</a><a id="ctm_tour_index_4" href="javascript:;" data-poiid="" data-name="温泉">温泉</a><a id="ctm_tour_index_5" href="javascript:;" data-poiid="" data-name="亲子游">亲子游</a><a id="ctm_tour_index_0" href="javascript:;" data-poiid="" data-name="海岛">海岛</a><a id="ctm_tour_index_1" href="javascript:;" data-poiid="" data-name="古镇">古镇</a><a id="ctm_tour_index_2" href="javascript:;" data-poiid="" data-name="漂流">漂流</a><a id="ctm_tour_index_3" href="javascript:;" data-poiid="" data-name="滑雪">滑雪</a><a id="ctm_tour_index_4" href="javascript:;" data-poiid="" data-name="温泉">温泉</a><a id="ctm_tour_index_5" href="javascript:;" data-poiid="" data-name="亲子游">亲子游</a> </p> <p>2：内联元素间的换行符、空格符、制表符等产生了空白符都是字符，设置其font-size:0，消除空白符</p> <p class="motifline-display resolve-solution"> <a id="ctm_tour_index_0" href="javascript:;" data-poiid="" data-name="海岛">海岛</a> <a id="ctm_tour_index_1" href="javascript:;" data-poiid="" data-name="古镇">古镇</a> <a id="ctm_tour_index_2" href="javascript:;" data-poiid="" data-name="漂流">漂流</a> <a id="ctm_tour_index_3" href="javascript:;" data-poiid="" data-name="滑雪">滑雪</a> <a id="ctm_tour_index_4" href="javascript:;" data-poiid="" data-name="温泉">温泉</a> <a id="ctm_tour_index_5" href="javascript:;" data-poiid="" data-name="亲子游">亲子游</a> <a id="ctm_tour_index_0" href="javascript:;" data-poiid="" data-name="海岛">海岛</a> <a id="ctm_tour_index_1" href="javascript:;" data-poiid="" data-name="古镇">古镇</a> <a id="ctm_tour_index_2" href="javascript:;" data-poiid="" data-name="漂流">漂流</a> <a id="ctm_tour_index_3" href="javascript:;" data-poiid="" data-name="滑雪">滑雪</a> <a id="ctm_tour_index_4" href="javascript:;" data-poiid="" data-name="温泉">温泉</a> <a id="ctm_tour_index_5" href="javascript:;" data-poiid="" data-name="亲子游">亲子游</a> </p> <p>3：使用float:left</p> <p class="motifline-float"> <a id="ctm_tour_index_0" href="javascript:;" data-poiid="" data-name="海岛">海岛</a> <a id="ctm_tour_index_1" href="javascript:;" data-poiid="" data-name="古镇">古镇</a> <a id="ctm_tour_index_2" href="javascript:;" data-poiid="" data-name="漂流">漂流</a> <a id="ctm_tour_index_3" href="javascript:;" data-poiid="" data-name="滑雪">滑雪</a> <a id="ctm_tour_index_4" href="javascript:;" data-poiid="" data-name="温泉">温泉</a> <a id="ctm_tour_index_5" href="javascript:;" data-poiid="" data-name="亲子游">亲子游</a> <a id="ctm_tour_index_0" href="javascript:;" data-poiid="" data-name="海岛">海岛</a> <a id="ctm_tour_index_1" href="javascript:;" data-poiid="" data-name="古镇">古镇</a> <a id="ctm_tour_index_2" href="javascript:;" data-poiid="" data-name="漂流">漂流</a> <a id="ctm_tour_index_3" href="javascript:;" data-poiid="" data-name="滑雪">滑雪</a> <a id="ctm_tour_index_4" href="javascript:;" data-poiid="" data-name="温泉">温泉</a> <a id="ctm_tour_index_5" href="javascript:;" data-poiid="" data-name="亲子游">亲子游</a> </p> <p> block元素display:inline-block;后也会产生间隙 <p> <div class="motifline-block"> <div id="ctm_tour_index_0" href="javascript:;" data-poiid="" data-name="海岛">海岛</div> <div id="ctm_tour_index_1" href="javascript:;" data-poiid="" data-name="古镇">古镇</div> <div id="ctm_tour_index_2" href="javascript:;" data-poiid="" data-name="漂流">漂流</div> <div id="ctm_tour_index_3" href="javascript:;" data-poiid="" data-name="滑雪">滑雪</div> <div id="ctm_tour_index_4" href="javascript:;" data-poiid="" data-name="温泉">温泉</div> <div id="ctm_tour_index_5" href="javascript:;" data-poiid="" data-name="亲子游">亲子游</div> <div id="ctm_tour_index_0" href="javascript:;" data-poiid="" data-name="海岛">海岛</div> <div id="ctm_tour_index_1" href="javascript:;" data-poiid="" data-name="古镇">古镇</div> <div id="ctm_tour_index_2" href="javascript:;" data-poiid="" data-name="漂流">漂流</div> <div id="ctm_tour_index_3" href="javascript:;" data-poiid="" data-name="滑雪">滑雪</div> <div id="ctm_tour_index_4" href="javascript:;" data-poiid="" data-name="温泉">温泉</div> <div id="ctm_tour_index_5" href="javascript:;" data-poiid="" data-name="亲子游">亲子游</div> </div> </body></html>
inline元素设置display:inline-block存在空隙问题
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。