1

我在容器 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;
}

没有边距或填充弄乱它，我不知道为什么它的行为像这样而不是浮动。有任何想法吗？

4

3 回答 3

3

这是由于 HTML 标记中的空格和/或换行符造成的。在代码中删除它们，边距也会消失。'inline' Elements 和display: inline-block.

于 2013-09-20T23:02:20.927 回答
3

尤达，

这是由于 .item 元素的显示类型而发生的。当您设置 display:inline-block 时，它不会在不留空间的情况下堆叠元素。就像设置 float:left 时一样，元素彼此堆叠在一起，没有空间。

解决方法是将 font-size:0 设置为父元素。在你的情况下，#gallery 应该有 font-size:0 ，你很高兴。

于 2013-09-20T23:04:11.747 回答
1

display: inline-block意味着元素被处理为内联（如单词）和块（如 div 或图像）。这意味着它们将具有行高、字间距和自动换行，并且会受到 text-align 的影响，就像 inline-elements 一样。尝试设置：

word-spacing: 0;

后

display: inline-block;

确认这是否解决了它。

于 2013-09-20T23:09:09.667 回答