实现响应式css“轮播”组件时出现奇怪的水平差距

Question

我正在为我正在实施的网站开发一个自包含的响应式css组件（轮播类型）。

需要有无限数量的内容项（从服务器加载），一次只显示两个。当用户前进到项目列表时，它们似乎向左滚动，新项目从右侧过渡到当前项目向左。

项目应根据当前的响应布局获取其宽度。

一般的想法是将视口作为页面布局的一部分，并且可以接受px或%中所述的任何宽度，这是一个获得width: 100%的容器，以便它填充视口的大小。和没有包装水平并排排列的物品，物品的宽度为50％，因此恰好有两个物品装入容器/视口，其余物品溢出（并隐藏）。

<div class="viewport">
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <!-- more items get loaded as the user advances through the content -->
    </div>
</div>

“滚动”是通过在第一项上设置负边距来实现的 - 这种技术我总能设置负边距，即：＆lt; 项数＆gt; * 50％

我主要使用以下jsfiddle：http://jsfiddle.net/gZBEV/5/ 物品排列正确，根据周围视口的宽度得到它们的宽度。 （使用按钮模拟移动/滚动项目）

问题是每个项目之间出现的水平间隙（如箭头所示），这会突破布局。

对此的解决方案是找到一种方式，如果项目之间没有水平间隙，如下：

使用此小提琴http://jsfiddle.net/gZBEV/5/作为起点。

Answer 1

如果删除div中的回车符，则会删除空格：

<div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div></div>

Answer 2

这是因为元素是display:inline-block。内联块级元素遵循行高，字体大小和空格。将父级的字体大小更改为0px，间隙消失。这意味着您必须在事后重新分配字体大小（对于仅图像滑块很有用。对于内容滑块而言不是那么多。）

http://jsfiddle.net/RAbSU/

.container {
  ...
  display: inline-block;    
  font-size: 0px;
  & > * {      
    font-size: 12px;
  }
  ...

编辑：否则，您只需使用display:block将格式更改为float:left。