<分区>
我在容器 div 上有一组带有 display: inline-block
的元素,如果内容超过设备宽度,它们应该水平扩展。一切正常,但每个 .item
元素之间有一个奇怪的边距,正如您在此处看到的:http://julienlima.com/
(注意图片之间的蓝线)
<span class="fix item">
<img src="image.jpg" data-ratio="1.33" data-width="800" data-height="600" />
<div class="fix details">
<div class="fix row"><a href="#" class="title">title</a></div>
<div class="fix row"><div class="date">date</div></div>
<div class="fix row"><a href="#" class="view">View Post</a></div>
</div>
#gallery {
clear: both;
width: auto;
white-space: nowrap;
}
#gallery .item {
display: inline-block;
*display: inline;
width: auto;
min-width: 100px;
white-space: nowrap;
border-right: 1px #CCC dotted;
border-bottom: none;
padding: 0 25px;
}
#gallery .item:first-child {
margin-left: 25px;
border-left: 1px #CCC dotted;
}
没有边距或填充弄乱它,我不知道为什么它会这样而不是 float 。有什么想法吗?