CSS跨度浮动

Question

在下面的HTML中，我想在同一行上显示跨度和h2，两者均向左浮动。跨度中有较少的文本，但H2有更多，所以应该继续到下一行，但目前看来，我做错了什么：

HTML：

<div> 
    <span>hello</span> 
    <h2>This should start after the span, and continue to next line.</h2> 
</div> 

CSS：

div{ 
    border: 1px solid red; 
    width: 150px; 
    overflow: hidden; 
} 

span{ 
    display: inline-block; 
    float: left; 
    border:1px solid green; 
} 

h2{ 
    display: inline-block; 
    float: left; 
} 

演示： http://jsfiddle.net/ZnSBJ/

Answer 1

从h2删除float:left，改变inline-block to inline

h2{ 
    display: inline; 
} 

DEMO

---

如果你想H2表现得像框，然后指定宽度

h2{ 
    display: inline-block; width:100px 
} 

DEMO 2