首页 >HTML讨论组 >html5 - li元素inline-block横向排列,出现了未知间隙

html5 - li元素inline-block横向排列,出现了未知间隙html5 - li元素inline-block横向排列,出现了未知间隙火热

Code

<header>
        <ul>
            <li><a href="">我的首页</a></li>
            <li><a href="">GitHub</a></li>
            <li><a href="">about me</a></li>
            <li><a href="">所有内容</a></li>
            </ul>
    </header>

body,ul,h1{
    margin: 0;
    padding: 0;
}
li{
    list-style: none;
}
a {
    text-decoration: none;    
} 
header {
    width: 1000px;
}
li {
    padding: 25px;
    text-align: center;
    display: inline-block;
    width: 200px;
}

通过上面的代码,我想将四个li元素横向排列,

li width:200px(200*4=800px);
左右padding为25px(25*8=200px);
总和1000px;但是实际却超过了1000px。

第一个li是正常的

第二个li开始出现偏移,但预设border,margin都为0;

搞不清楚为什么两个li之间为什么不是紧挨着的

之后我开始凑数,想找出这个间隙的大小,结果发现:

在Firefox中,1015px及以上可以一行显示...
但在Chrome中,1024px及以上时才可以做到一行显示;
我完全搞不懂了...通过Head First进行入门,但是回顾了一下,也没有任何关于这种情况的说明

Chrome(1015px):


Firefox(1015px):


Chrome(1024px):


纠结中...寻求大神指导几句,这个间隙到底是什么东西

 
16
 
+1
-1
 
分享
全部回复 (16)我来回答
    PHP中文网
    0楼
    PHP中文网 · 8个月前

    想问一下题主那个页面上测量的工具叫什么

      赞+0添加回复

    伊谢尔伦
    0楼
    伊谢尔伦 · 8个月前

    你既然使用的是Li,为什么不去使用float:left.来实现你所要的功能呢。
    另外这个并不是未知间隙,但是它的间隙宽度在不同浏览器都有不同的宽度,所以不可以通过修改偏移来实现,其实我常用的方法就是前面几个不要加闭合标签即可。
    例如

    <a>你好
    <a>hello
    <a>world</a>

    在最后一个标签加上闭合标签,防止出现问题。
    这样可以完美解决间隙问题。

      赞+0添加回复

    猪哥
    0楼
    猪哥 · 8个月前

    为了保持html结构好看,我常用的做法是在父元素上设置 font-size: 0

      赞+0添加回复

    黄舟
    0楼
    黄舟 · 8个月前

    我试了一下

      * { margin: 0; padding: 0; }
      section { width: 1000px; border: 1px solid #000; }
      li { text-align: center; list-style: none; display: inline-block; padding: 25px; width: 150px; height: 100px; line-height: 100px; margin-right: -8px; }
      </style>
    </head>
    <body>
    <section>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
    </section>

    这个margin-right:-8px;
    兼容 chrome firefox IE Edge 360

      赞+0添加回复

    大家讲道理
    0楼
    大家讲道理 · 8个月前

    请设置父级元素
    font-size:0;

      赞+0添加回复

    猪哥
    0楼
    猪哥 · 8个月前

    <li>标签设置为display:inline-block 结束标签的后面添加换行符,这个时候就会产生空白符 。这个换行符就是一个字符。会占据位置。

    IE8以上的IE浏览器以及FF、chrome等的标准浏览器会产生空白bug问题,其中chrome中显示的是8px的空白bug,但是其他浏览器则是4px的空白bug。

    1. 方法一:在代码中</li><li>中间的空白去掉

    2. 方法二:通过负向margin解决 margin-right: -4px; *margin-right: 0px; chrome是8px不能解决(ps:我试了一下方法二可以解决chrome。 )。*是ie6或者ie7 这是利用ie的解析bug

    3. 方法三:设置父元素 font-size :0; 这个不能解决safari ,letter-spacing:-4px;(调整字符间距,将其去掉)这个可以解决safari;二者结合
      方法四:丢失结束标签把 </li>去掉(不建议,不过很多压缩工具可以设置去掉结束标签,处女座不能忍);

      赞+0添加回复

    PHP中文网
    0楼
    PHP中文网 · 8个月前

    回车换行导致的,解决方案很多,找到根源了,你可以删除换行,你可以把ul的font-size:0,然后li,写上你的需要的字号(chrome应该是有最小字号12的问题),还有就是margin设置负值

      赞+0添加回复

    怪我咯
    0楼
    怪我咯 · 8个月前

    楼上方法视乎都对,最简单办法是不换行

      赞+0添加回复

    阿神
    0楼
    阿神 · 8个月前

    @xiadd Opera是个坑哈哈,4px不符合

      赞+0添加回复

    黄舟
    0楼
    黄舟 · 8个月前

    楼上都是正确的,还有一种解决方法就是margin取负值。没记错的话是取-4px

      赞+0添加回复

    怪我咯
    0楼
    怪我咯 · 8个月前

    你把父级的字体设置成0就没有间隙了!

      赞+0添加回复

    猪哥
    0楼
    猪哥 · 8个月前

    所以一般的菜单布局尽量不用inline-block,而是用float:left来实现。

      赞+0添加回复

    猪哥
    0楼
    猪哥 · 8个月前

    这个原因是因为li元素的换行引起的,你可以把所有的li写成一行: <li>1</li><li>1</li><li>1</li> ,一定不要换行。

    或者用注释符号链接:

    <li>1</li><!--
    --><li>1</li><!--
    --><li>1</li>

    或者用 html 5 不闭合的写法:

    <li>1
    <li>1
    <li>1

    还有个解决方案就是设置 父级元素的字体大小 font-size: 0px;

      赞+0添加回复

    大家讲道理
    0楼
    大家讲道理 · 8个月前

    inline-block间隔问题

      赞+0添加回复

    怪我咯
    0楼
    怪我咯 · 8个月前

    <header>
            <ul>
                <li><a href="">我的首页</a></li>
                <li><a href="">GitHub</a></li>
                <li><a href="">about me</a></li>
                <li><a href="">所有内容</a></li>
                </ul>
        </header>

    楼主, 当你吧块级元素,转换成行内元素的时候,有没有想过空格会影响到排版呢?
    就比如

    <p><a href="">yyy</a><b>xxxxx<b></p>
    
    <p><a href="">yyy</a> <b>xxxxx<b></p>
    
    <p>
     <a href="">yyy</a>
     <b>xxxxx<b>
    </p>

    这3种情况显示的是一样?
    如果你真看明白了我给你的例子, 那么你的问题就已经解决了。

    结论

    这个未知间隙就是空格,也就是你的换行符,块级元素可以忽略换行符, 但是行内元素不会。

      赞+0添加回复

    阿神
    0楼
    阿神 · 8个月前

    这是inline-block的空白间隙问题

    这些是一些空白字符,看不见,但是会占据一定的width

    解决办法有很多
    某处理方法 来自 http://www.w3cplus.com/css/fighting-the-space-between-inline-block-elements

    .finally-solve {
      letter-spacing: -4px;/*根据不同字体字号或许需要做一定的调整*/
      word-spacing: -4px;
      font-size: 0;
    }
    .finally-solve li {
      font-size: 16px;
      letter-spacing: normal;
      word-spacing: normal;
      display:inline-block;
      *display: inline;
      zoom:1;
    }

    具体处理方法 你可以看下 w3cplus上的文章 如何解决inline-block元素的空白间距

      赞+0添加回复

    首页上一页1下一页尾页