0

我已经使用 CSS 创建了一个图表，但我在内部 div（条形类）方面遇到了一些问题。内部 div 之间有空格。我尝试过使用 float: left。它可以删除空格，但内部 div 不与外部 div（图形类）的底部相邻。

这是一个示例链接（仍然没有删除空格）：http
://dabblet.com/gist/2779082 谢谢

HTML

<div class="graph">
    <div style="height: 22px;" class="bar"></div>
    <div style="height: 11px;" class="bar"></div>
    <div style="height: 6px;" class="bar"></div>
    <div style="height: 49px;" class="bar"></div>
    <div style="height: 28px;" class="bar"></div>
</div>

CSS

.graph {
    width: 50px;
    height: 50px;
    border: 1px solid #aeaeae;
    background-color: #eaeaea;
}

.bar {
    width: 8px;
    margin: 1px;
    display: inline-block;
    position: relative;
    background-color: #aeaeae;
    vertical-align: baseline;
}
4

6 回答 6

2

添加

.bar {
    padding:0;
    margin:0;
 }
于 2013-11-08T12:43:37.827 回答
1 
.bar {
    padding:0;
    margin:0;
 }

我很确定白色的地方会消失，但因为边框会变成另一种颜色。从您的div.

您的div.

于 2013-11-08T12:51:24.650 回答
0

您需要真正删除 div 之间的空格，请尝试以下操作，而不是

<div class="graph">
    <div style="height: 22px;" class="bar"></div>
    <div style="height: 11px;" class="bar"></div>
    <div style="height: 6px;" class="bar"></div>
    <div style="height: 49px;" class="bar"></div>
    <div style="height: 28px;" class="bar"></div>
</div>

完全一样，div之间没有空格

<div class="graph">
    <div style="height: 22px;" class="bar"/>
    <div style="height: 11px;" class="bar"/>
    <div style="height: 6px;" class="bar"/>
    <div style="height: 49px;" class="bar"/>
    <div style="height: 28px;" class="bar"/>
</div>
于 2014-02-25T10:57:22.240 回答
0

只需添加margin:0;到您的栏 css，您的图表之间的空格被删除..您可以在图像中看到它...

在此处输入图像描述

于 2013-11-08T12:52:42.027 回答
0

我想这个问题的回复有点晚了，但答案可能会帮助遇到同样问题的其他人。

其实我不是在回答这个问题，答案在下面的链接中。

为什么这些 inline-block div 元素之间存在无法解释的差距？

于 2014-12-31T09:49:45.683 回答
0

添加padding: 0px;到您的.graph

于 2013-11-08T12:43:33.850 回答