Question

这个问题似乎已被回答了一百万次，而且似乎也有一百万次。不过不适合我。我想将

中的所有div组合在一起

<body>
    <div class="mainprogress">
        <div class="detailprogress" style="height:100%;width:18%">
            <div class="done" style="width:58%"></div>
            <div class="late" style="width:41%"></div>
        </div>
        <div class="detailprogress" style="height:35%;width:81%">
            <div class="done" style="width:73%"></div>
            <div class="todo" style="width:26%"></div>
        </div>
    </div>
</body>

为此我使用以下CSS

.mainprogress {
    height:60px;
    border:2px solid black;
}
.mainprogress div{
    padding:0;
    margin:0;
    display:inline-block;
}
.detailprogress div {
    height:100%;
}
.detailprogress .done {
    background-color:lightgreen;
}
.detailprogress .donelate {
    background-color:lightpink;
}
.detailprogress .late {
    background-color:red;
}
.detailprogress .todo {
    background-color:green
}

（小提琴：http://jsfiddle.net/uhBW2/5/）当充分利用负边缘时，它似乎开始在某个时刻起作用，但它感觉非常hackish。如何让元素相互对齐？

Answer 1

背景：

内联块在项目之间插入自然空间。事实上，如果您要点击内容中的空格键，或者甚至键入 （html标记空间），它实际上就是空格的宽度。根据您的字体大小，此空间将更小或更大。

这个问题有几个修复，我个人以及许多其他人认为这个问题是一种需要修复的“bug”。也就是说，对此的所有修复都是非常“hackish”可以这么说。您选择的解决方案取决于您的个人偏好。

根据您的具体情况和代码建议的解决方案：

只需切换到使用浮动代替。而不是设置display: inline-block;执行此操作：

http://jsfiddle.net/uhBW2/9/

.mainprogress div{
    padding:0;
    margin:0;
    float: left;
}

其他解决方案：

（请注意，在使用margin-left的JDFiddle解决方案中，第一个div在它不应该这样做时也向左移动。要解决这个问题，你需要在第一个div上实现一个类并进行 - 单独该div的值为4。另一个解决方案，也是我首选的解决方案，是使用:first-child structural pseudo-class来选择第一个div。它更具动态性，并且不需要HTML修改。

通过添加margin-left: -4px; - http://jsfiddle.net/uhBW2/10/
使用font-size: 0px; - http://jsfiddle.net/uhBW2/11/
通过删除div之间的换行符来修复空间（不推荐 - 很难阅读） - http://jsfiddle.net/uhBW2/12/
使用word-space: -.25em;修复空间（请参阅下面的PavloMykhalov评论） - http://jsfiddle.net/uhBW2/13/

***其他开发者注意：如果还有其他解决方案，请在下面发布，我将在上面添加。我觉得我错过了解决这个问题的第五种方法......

Answer 2

创建空格是因为您已将div设置为“display：inline-block”。

在这里阅读如何修复：

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 3

尝试使用浮点数代替内联块，更广泛的支持，它实际上有效：

http://jsfiddle.net/uhBW2/7/

.mainprogress {
    height:60px;
    border:2px solid black;
    overflow: hidden;
}
.mainprogress div{
    padding:0;
    margin:0;
    float: left;
}

Answer 4

您需要将float:left添加到您需要推送到一起的所有元素，如下所示：

.mainprogress {
    height:60px;
    border:2px solid black;
}
.mainprogress div{
    padding:0;
    margin:0;
    display:inline-block;
    float:left;
}
.detailprogress div {
    height:100%;
    float:left;
}
.detailprogress .done {
    background-color:lightgreen;
    float:left;

}
.detailprogress .donelate {
    background-color:lightpink;
    float:left;
}
.detailprogress .late {
    background-color:red;
    float:left;
}
.detailprogress .todo {
    background-color:green
        float:left;
}

删除div之间的边距

4 个答案:

背景：

根据您的具体情况和代码建议的解决方案：

其他解决方案：