我正在尝试将div设置为带有文本和图形的标题区域。当我添加一个svg元素时，span元素的位置不再是我指定的位置。我将跨度定位为相对，以便将其填充到顶部。
这是js-fiddle：http://jsfiddle.net/fZTm7/3/
我希望第二个 div 看起来就像第一个 Bar 替换为svg矩形一样。
我还看到，当我减小svg元素的高度时， span 从其预期位置的位移量变小。这完全令人费解。由于我在chrome和firefox中看到相同的行为，我确信有一些css规则被破坏。
任何人都能解释一下吗？
答案 0 :(得分：2)
在span和svg上使用float: left。请参阅：http://jsfiddle.net/fZTm7/10/
答案 1 :(得分：0)
您可以将vertical-align: top;添加到.panel-hdg课程，以获得所需的效果。
答案 2 :(得分：0)
为SVG标记添加float: left属性将解决对齐问题。您无需为.panel-hdg类添加。
svg{float: left;}
演示：http://jsfiddle.net/fZTm7/27
现在回到你对@Logan Serman回答的评论： 对于任何元素使用FLOAT属性同时将元素并排对齐是一个拇指规则。
在您的情况下，有SPAN和SVG标记。 SPAN是一个INLINE元素，并且没有指定SVG的物理行为 - INLINE / BLOCK。所以浮动是唯一可以修复的属性。