7

这个问题似乎已经被回答了一百万次，它似乎也工作了一百万次。不过不适合我。我想把所有的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/）当摆弄负边距时，它似乎在某个时候开始工作，但感觉非常糟糕。如何让元素相互对齐？

4

4 回答 4

13

背景：

内联块在项目之间插入一个自然空间。实际上，如果您要在内容中点击空格键，甚至键入&nbsp;（一个 html 标记空间），它本质上就是一个空格的宽度。这个空间将根据您的字体大小而变小或变大。

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

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

只需切换到使用浮点数。而不是设置display: inline-block;这样做：

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

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

其他解决方案：

（请注意，在使用margin-left第一个 div 的 JDFiddle 解决方案中，当它不应该这样做时，它也会向左移动。为了解决这个问题，您需要在第一个 div 上实现一个类，并将该 div 的 -4 值设为 0。另一种解决方案，也是我首选的解决方案，是使用:first-child 结构化伪类来选择第一个 div。它更加动态，并且不需要修改 HTML。

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

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

于 2013-08-19T13:57:19.587 回答
2

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

在此处阅读如何修复：

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

于 2013-08-19T13:54:09.690 回答
2

尝试使用浮点数而不是内联块，更广泛的支持，它确实有效：

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

.mainprogress {
    height:60px;
    border:2px solid black;
    overflow: hidden;
}
.mainprogress div{
    padding:0;
    margin:0;
    float: left;
}
于 2013-08-19T13:54:34.250 回答
1

您需要添加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;
}
于 2013-08-19T13:55:56.957 回答