我在预览时没有出现在safari中,但它在其他浏览器中出现。
您可以看到“投资组合”列表项目在每个项目下面有大约2个像素的空白区域。这是从哪里来的?我有填充和边距设置为0和nowrap但无法找出任何其他原因..任何想法?
* {
margin:0;
}
html, body {
height:100%;
}
body {
background-color:#fff;
}
#leftnav {
background-color:#232323;
width:20%;
min-height:100%;
height: auto !important;
float:left;
text-align:center;
padding:75px 0 0px 0px;
position:fixed;
left:0;
top:0;
}
#portfolio {
white-space: nowrap;
text-align:center;
margin:0;
width:80%;
float:right;
}
#portfolio ul {
margin:0;
padding:0;
}
#portfolio li {
width: 25%;
display: inline-block;
text-align: center;
vertical-align: middle;
margin:0;
padding:0;
float:left;
}
#portfolio img {
max-width:100%;
margin:0;
padding:0;
}
#maintop {
width:80%;
height:45%;
background-color:#caab7e;
float:right;
text-align:center;
}
<body>
<div id="leftnav"></div>
<div id="maintop"></div>
<div id="portfolio">
<ul>
<li><img src="http://dummyimage.com/400x300/000/fff"></li>
<li><img src="http://dummyimage.com/400x300/090/fff"></li>
<li><img src="http://dummyimage.com/400x300/900/fff"></li>
<li><img src="http://dummyimage.com/400x300/009/fff"></li>
<li><img src="http://dummyimage.com/400x300/000/fff"></li>
<li><img src="http://dummyimage.com/400x300/090/fff"></li>
<li><img src="http://dummyimage.com/400x300/900/fff"></li>
<li><img src="http://dummyimage.com/400x300/009/fff"></li>
<li><img src="http://dummyimage.com/400x300/000/fff"></li>
<li><img src="http://dummyimage.com/400x300/090/fff"></li>
<li><img src="http://dummyimage.com/400x300/900/fff"></li>
<li><img src="http://dummyimage.com/400x300/009/fff"></li>
</ul>
</div>
</body>
答案 0 :(得分:3)
来自字体大小/行高。添加:
#portfolio li {
font-size: 0;
}
或:
#portfolio li {
line-height: 0;
}
答案 1 :(得分:0)
我也不知道白色空间的来源,但你可以设置li{ height: 87px; }
,这将使空白区域消失。
答案 2 :(得分:0)
Opera浏览器也没空间。我用firebug插件在firefox中检查它,我可以看到img的高度是285px,li的高度是290px。现在,当我为li添加高度285px时,空间消失了。
#portfolio li {
width: 25%;
display: inline-block;
text-align: center;
vertical-align: middle;
margin:0;
padding:0;
float:left;
height: 285px;
}