Question

我无法正确对齐div（我希望div排成一行，以便4个50px div完全适合200px容器），总有空格，尽管元素没有填充或边距。

我在JSFiddle的内部和外部以及chrome和firefox上尝试过这个。

HTML：

<div id="prev">PREV</div>
    <div id="next">NEXT</div>

    <div id="slides">
        <div class="offset-parent">
            <div class="images">1</div>
            <div class="images">2</div>
            <div class="images">3</div>
            <div class="images">4</div>
            <div class="images">5</div>
            <div class="images">6</div>
            <div class="images">7</div>
            <div class="images">8</div>
            <div class="images">9</div>
            <div class="images">10</div>
            <div class="images">11</div>
            <div class="images">12</div>
            <div class="images">13</div>
            <div class="images">14</div>
            <div class="images">15</div>
            <div class="images">16</div>
            <div class="images">17</div>
            <div class="images">18</div>
            <div class="images">19</div>
            <div class="images">20</div>

        </div>
    </div>

CSS：

body{
white-space:nowrap;
margin: 0px
}

.images{
position:relative;
height: 100%;
width: 50px;
display: inline-block;
padding: 0px;
box-sizing: border-box;
border:1px solid red;
margin: 0px;
}

#prev{
position:fixed;
top:20px;
left:0px;
cursor: pointer;
}

#next{
position:fixed;
top:0px;
left:0px;
cursor: pointer;
}

.offset-parent {
position: relative;
width: 200px;
}

#slides {
position: relative;
top:50px;
overflow: auto;
height: auto;
width: 200px;
overflow: hidden;
}

Answer 1

总有一个带有内联块元素的4px右侧边框...不要问我为什么，但它可以追溯到我的grampappy的grampappy。消除它的两种方法：

删除HTML元素之间的空格
将parent的font-size设置为0，然后显式设置子元素的font-size

我更喜欢第一种方法，因为它非常容易实现，未来的CSS更改不会破坏它：

        <div class="images">
            1
        </div><div class="images">
            2
        </div><div class="images">
            3
        </div><div class="images">

Etc等。如果您想了解更多信息，请article is a great resource on the topic。

<强>更新

我updated your jsFiddle使用font-size:0技巧，主要是因为我不想重新格式化所有HTML，但也因为它提供了与我上面提供的修复相同的结果。

Answer 2

div之间的换行符将被解释为空格，即HTML结果中的单个空格。

我建议将div设置为float：left。这将消除它们之间的空白区域。

Answer 3

内联块使其以与图像类似的方式运行，而不是纯粹的块元素（默认情况下为div），因此div之间的空间是可见的。

这个空间就像是文字之间的空间。

您可以删除div之间的空格，也可以使每个块而不是内联块并将它们向左浮动。

Answer 4

这是因为.images有display:inline-block;，默认情况下会留下空格。为了弥补这一点，你有两个选择。首先要么像这样添加负边距

.images{
margin-left:-4px;
}

或者您可以将display inline-block更改为block并添加float left;。

使div正确对齐

4 个答案: