我使用CSS创建了一个图形但是我遇到了一些内部div(bar类)的麻烦。内部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;
}
答案 0 :(得分:2)
添加
.bar {
padding:0;
margin:0;
}
答案 1 :(得分:1)
.bar {
padding:0;
margin:0;
}
我很确定白色的地方会消失,但因为边界会变成另一种颜色。它需要div
的每一侧1px。
div
之间总是存在差距。
答案 2 :(得分:0)
将padding: 0px;
添加到您的.graph
答案 3 :(得分:0)
只需将margin:0;
添加到您的栏目css中,您的图表之间的空格就会被移除。您可以在图片中看到它......
答案 4 :(得分: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>
答案 5 :(得分:0)
我想这个问题的回复有点太迟了,但答案可能会帮助那些遇到同样问题的人。
事实上我没有回答这个问题,答案在下面的链接中。
Why is there an unexplainable gap between these inline-block div elements?