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

Question

编辑:修复。感谢大家的帮助；)

大家好，

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

元素“Notícias”和蓝色条都在名为“content”的 div 中。蓝色条在跨度内，由 3 个 div 创建。左边一张图片，中间一张是重复背景，最后一张是最后一张图片。

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

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

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;
}

如果它不起作用，如果您可以发布指向 bar 演示的链接，那就太好了。