使 div 正确对齐答案

【问题标题】：Make divs align correctly使 div 正确对齐
【发布时间】：2014-07-09 04:12:27
【问题描述】：

我无法让 div 正确对齐（我希望 div 对齐，以便 4 个 50 像素的 div 完美地放入 200 像素的容器中），尽管元素没有填充或边距，但总是有空格。

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

【问题讨论】：

您能否更清楚地了解“正确对齐”的含义？
当然，我已经编辑了问题。

标签： jquery html css

【解决方案1】：

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

我建议将 div 设置为 float: left。这将删除它们之间的空白。

【讨论】：

【解决方案2】：

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

删除 HTML 元素之间的空格
设置父元素的字体大小为0，然后显式设置子元素的字体大小

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

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

等等。如果你想了解更多信息，这个article is a great resource on the topic。

更新

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

【讨论】：

【解决方案3】：

inline-block 使其行为方式类似于图像，而不是纯块元素（默认情况下是 div），因此 div 之间的空间是可见的。

那个空格就像单词之间的空格。

您可以删除 div 之间的空间，或者将每个 div 设置为块而不是 inline-block 并将它们向左浮动。

【讨论】：

【解决方案4】：

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

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

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

【讨论】：