CSS元素被分离/破坏/包装

Question

编辑：修复。谢谢大家的帮助;）

大家好，

我遇到一些问题，蓝色条形元素被分开而不是在一起。

两个元素“Notícias”和蓝色条都位于名为“content”的div中。蓝色条位于跨度内，并使用3个div创建。一个用于左图像，中间一个是重复背景，最后一个是最后一个图像。

这是一张说明问题的图片：http://i52.tinypic.com/b3vhic.png

代码如下：
.barra .barra-azul {
background: url(outros/barra_sidebar_e.png) no-repeat top left;
display: inline-block;
height: 14px;
width: 7px;
}
.barra .barra-azul-meio {
background: #56a3eb repeat-x;
display: inline-block;
height: 14px;
width: 50%;
}
.barra .barra-azul-fim {
background: url(outros/barra_sidebar_d.png) no-repeat top right;
display: inline-block;
height: 14px;
width: 7px;
}

html是：

<span class="barra">  
<div class="barra-azul"></div>  
<div class="barra-azul-meio"></div>  
<div class="barra-azul-fim"></div>  
</span>

实现这一目标的最佳方法是什么？

提前致谢;）

Answer 1

如果不能尝试实际的代码和图形，很难回答。但您可以从添加以下内容开始。

.barra div {
  padding: 0;
  margin: 0;
}

如果它不起作用，那么如果你可以发布一个棒的演示链接就会很棒。

Answer 2

问题是，根据CSS规则，它们是内联 - 块元素，并且在标记中它们之间有空格。你应该漂浮它们，或绝对定位它们。

HTML：

<div class="barra">
  <div class="barra-azul"></div>
  <div class="barra-azul-meio"></div>  
  <div class="barra-azul-fim"></div>
</div>

CSS：

.barra > div {
  float: left;
  height: 14px;
  width: 7px;
}

.barra .barra-azul {
  background: url(outros/barra_sidebar_e.png) no-repeat top left;
}

.barra .barra-azul-meio {
  background: #56a3eb repeat-x;
  width: 50%;
}

.barra .barra-azul-fim {
  background: url(outros/barra_sidebar_d.png) no-repeat top right;
}

这也减少了你所经历的一堆重复。