html - CSS跨度 float

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

从 h2 中移除 float:left 并将 inline-block 更改为 inline

h2{
  display: inline;
}

DEMO

---

如果你想让 h2 表现得像盒子那么指定宽度

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

DEMO 2