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>

时间： 2024-09-30 00:56:47

inline元素设置display:inline-block存在空隙问题的相关文章

块级元素和行内元素以及display中block、inline和inline-block的区别

块元素又名块级元素(block element),和其对应的是内联元素(inline element),都是html规范中的概念.块元素和内联元素的基本差异是块元素一般都从新行开始,相邻的块级元素将会在不同行显示.而当加入了css控制以后,块元素和内联元素的这种属性差异就不成为差异了.比如,我们完全可以把内联元素加上display:block这样的属性,让它也有每次都从新行开始的属性,即成为块元素同样我们可以把块元素加上display:inline这样的属性,让它也在一行上排列. block元素

IE6、7下块级元素设置display:inline-block不换行的解决办法

使用背景在实际的工作中,我们有的时候会把块元素设置为inline-block,这样做的目的有2个,一是块元素能够排列到一行,二是块元素就形成包裹性,能够自适应content area,而不必设置宽和高(依实际情况而定),在现在浏览器中没有什么问题,但是IE6.7下,当把block元素设置成inline-block之后,还是在分别的两行,下面我们看一下现象. 代码以及IE6.7下的表现 CSS: body { padding: 10px; } .block_to_inlineblock, .in

display:inline、block、inline-block的区别摘】

display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子. display:inline就是将元素显示为行内元素. inline元素的特点是: 和其他元素都在一行上: 高,行高及顶和底边距不可改变: 宽度就是它的文字或图片

display:inline、block、inline-block的区别

block元素的特点是: 元素另起一行: 行宽高边距可控制: <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子. inline元素的特点是: 和其他元素都在一行上: 高,行高及顶和底边距不可改变: 宽度就是它的文字或图片的宽度,不可改变. <span>, <a>, <label>, <input>, <img>, <strong&

display:inline、block、inline-block

display:inline.block.inline-block的区别 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子. display:inline就是将元素显示为行内元素. inline元素的特点是: 和

【转】display:inline、block、inline-block的区别

转自:http://www.cnblogs.com/jdonson/archive/2011/06/10/2077932.html display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子. display:inline就

2016/2/25 1， margin auto 垂直方向测试无效 2，margin重叠 3，哪些是块状哪些是内联 4，display：block inline 导航栏把内联转块状最常见+ 扩展

1.利用margin auto完成首页居中,并自行研究,竖直方向用margin auto,是什么效果#container{width:1002px;margin: 0px auto;} 竖直方向上margin:auto;无效.2.测试margin重叠的发生条件及现象,并自行搜索“父子div”也会发生margin重叠,写出代码及效果图. <!DOCTYPE html> <html> <head> <title>测试父子DIV-margin</tit

display:block display:inline display:inline-block

默认情况下label.span 设置width 是无效的, 只有当display:block时,我们所设置的width才有效果,但这样会换行不换行可以使用display:inline-block; (另外label设置 position:absolute时,width也是有效果的) 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通常被现实为独立

display:block、display:inline与displayinline:block的概念和区别

总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通常被现实为独立的一块,会单独换一行:inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满. 大体来说HTML元素各有其自身的布局级别(block元素还是inline元素): 常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL,