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进行入门,但是回顾了一下,也没有任何关于这种情况的说明
这是inline-block的空白间隙问题
这些是一些空白字符,看不见,但是会占据一定的
width
等解决办法有很多
某处理方法 来自 http://www.w3cplus.com/css/fighting-the-space-between-inline-block-elements
具体处理方法 你可以看下 w3cplus上的文章 如何解决inline-block元素的空白间距