简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
html5 - li元素inline-block横向排列，出现了未知间隙
ringa_lee
ringa_lee 2017-04-17 11:50:00
0
16
3255

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）：

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

ringa_lee
ringa_lee

ringa_lee

全部回覆(16)
Ty80
Ty802017-04-17 11:52:00 16樓

回車換行導致的，解決方案很多，找到根源了，你可以刪除換行，你可以把ul的font-size:0,然後li，寫上你的需要的字號（chrome應該是有最小字號12的問題），還有就是margin設定負值

點贊 +0
新增回覆
洪涛
洪涛2017-04-17 11:52:00 15樓

  • 標籤設定為display：inline-block 結束標籤的後面加上換行符，這個時候就會產生空白符 。這個換行符就是一個字元。會佔據位置。

    IE8以上的IE瀏覽器以及FF、chrome等的標準瀏覽器會產生空白bug問題，其中chrome中顯示的是8px的空白bug，但是其他瀏覽器則是4px的空白bug。

    1. 方法一：在程式碼中

    2. 中間的空白去掉

    3. 方法二：透過負向margin解決 margin-right: -4px; *margin-right: 0px；chrome是8px無法解決（ps：我試了一下方法二可以解決chrome。）。 *是ie6或ie7 這是利用ie的解析bug

    4. 方法三：設定父元素font-size ：0； 這個不能解決safari ，letter-spacing：-4px;(調整字符間距，將其去掉)這個可以解決safari；二者結合
      方法四：丟失結束標籤把

      5. 去掉（不建議，不過很多壓縮工具可以設定去掉結束標籤，處女座不能忍）；
    • 點贊 +0
    新增回覆
    大家讲道理
    大家讲道理2017-04-17 11:52:00 14樓

    請設定父級元素
    font-size:0;

    點贊 +0
    新增回覆
    黄舟
    黄舟2017-04-17 11:52:00 13樓

    我試了一下

      * { 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
    新增回覆
    洪涛
    洪涛2017-04-17 11:52:00 12樓

    為了保持html結構好看，我常用的做法是在父元素上設定 font-size: 0

    點贊 +0
    新增回覆
    伊谢尔伦
    伊谢尔伦2017-04-17 11:52:00 11樓

    你既然使用的是Li,為什麼不去使用float:left.來實現你所要的功能呢。
    另外這個並不是未知間隙，但是它的間隙寬度在不同瀏覽器都有不同的寬度，所以不可以透過修改偏移來實現，其實我常用的方法就是前面幾個不要加閉合標籤即可。
    例如

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

    在最後一個標籤加上閉合標籤，防止出現問題。
    這樣可以完美解決間隙問題。

    點贊 +0
    新增回覆
    Ty80
    Ty802017-04-17 11:52:00 10樓

    想問題主那個頁面上測量的工具叫什麼

    點贊 +0
    新增回覆
    阿神
    阿神2017-04-17 11:52:00 9樓

    這是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
    新增回覆
    刘奇
    刘奇2017-04-17 11:52:00 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
    新增回覆
    大家讲道理
    大家讲道理2017-04-17 11:52:00 7樓

    inline-block間隔問題

    點贊 +0
    新增回覆
    熱門專題
    更多>
    熱門文章
    熱門教學
    更多>
    相關教學
    熱門推薦
    最新課程
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板
    關於我們 免責聲明 Sitemap
    PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！