Code
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):
纠结中...寻求大神指导几句,这个间隙到底是什么东西