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
之间为什么不是紧挨着的
在Firefox中,1015px及以上可以一行显示...
但在Chrome中,1024px及以上时才可以做到一行显示;
我完全搞不懂了...通过Head First进行入门,但是回顾了一下,也没有任何关于这种情况的说明
回車換行導致的,解決方案很多,找到根源了,你可以刪除換行,你可以把ul的font-size:0,然後li,寫上你的需要的字號(chrome應該是有最小字號12的問題),還有就是margin設定負值
IE8以上的IE瀏覽器以及FF、chrome等的標準瀏覽器會產生空白bug問題,其中chrome中顯示的是8px的空白bug,但是其他瀏覽器則是4px的空白bug。
方法一:在程式碼中
方法二:透過負向margin解決 margin-right: -4px; *margin-right: 0px;chrome是8px無法解決(ps:我試了一下方法二可以解決chrome。)。 *是ie6或ie7 這是利用ie的解析bug
方法三:設定父元素font-size :0; 這個不能解決safari ,letter-spacing:-4px;(調整字符間距,將其去掉)這個可以解決safari;二者結合
方法四:丟失結束標籤把
請設定父級元素
font-size:0;
我試了一下
這個margin-right:-8px;
相容於 chrome firefox IE Edge 360
為了保持html結構好看,我常用的做法是在父元素上設定 font-size: 0
你既然使用的是Li,為什麼不去使用float:left.來實現你所要的功能呢。
另外這個並不是未知間隙,但是它的間隙寬度在不同瀏覽器都有不同的寬度,所以不可以透過修改偏移來實現,其實我常用的方法就是前面幾個不要加閉合標籤即可。
例如
在最後一個標籤加上閉合標籤,防止出現問題。
這樣可以完美解決間隙問題。
想問題主那個頁面上測量的工具叫什麼
這是inline-block的空白間隙問題
這些是一些空白字符,看不見,但是會佔據一定的
width
等解決方法有很多
某個處理方法 來自 http://www.w3cplus.com/css/fighting-the-space-between-inline-block-elements
具體處理方法 你可以看下 w3cplus上的文章 如何解決inline-block元素的空白間距
樓主, 當你吧
块级元素
,轉換成行内元素
的時候,有沒有想過空格
會影響到排版呢?就比如
這3種情況顯示的是一樣?
如果你真看明白我給你的例子, 那你的問題就已經解決了。
結論
這個
未知间隙
,就是空格
,也就是你的换行符
,區塊級元素可以忽略換行符, 但是行內元素不會。inline-block間隔問題