0

次の HTML では、span と 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/

4

1 に答える 1

1

float:leftから取り外してh2変更inline-block to inline

h2{
  display: inline;
}

デモ

h2 をボックスのように動作させたい場合は、幅を指定します

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

デモ 2

于 2013-01-11T06:52:48.570 に答える