html - CSS跨度浮动

Question

在下面的 HTML 中，我想在同一行显示 span 和 h2，两者都向左浮动。span 中的文本较少，但 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

删除float:left并h2更改inline-block to inline

h2{
  display: inline;
}

演示

---

如果您希望 h2 像框一样，请指定宽度

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

演示 2