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>

 

posted @ 2014-12-24 16:03  海边菩提  阅读(342)  评论(0)    收藏  举报