如何才能让此css在Chrome中正确显示？

Question

我有以下简单的代码：

<div style="float:right">
   <h2>Header <div style="float:right;background-color:red">my text</div></h2>
   More text
</div>

看到这个小提琴

这会在Firefox和IE中显示我想要的方式 - 在同一行显示“Header”右侧的“my text”。 但是，在Chrome中，“我的文字”会在“更多文字”旁边按下一行。

我知道我可以通过在“标题”文本之前移动“我的文本”div来使其工作：

<h2><div style="float:right;background-color:red">my text</div>Header</h2>

但由于其他原因，我需要保持html的方式，并希望尽可能使用css实现这一点。 有没有办法让它在Chrome中显示我想要的方式（只需更改css）？

Answer 1

你可以像这样使用

<div style="float:right">
<h2>Header <div style="display:inline-block;background-color:red">My text</div></h2>
More text
</div>

这显示你想要看到这个小提琴

Answer 2

我认为以下代码对您有所帮助......

    <div style="float:right;width:170px">
     <h2>Header <div style="float:right;background-color:red">my text</div></h2>
     More text
    </div>

以下代码也很有用.....

 <div style="float:right">
  <h2>Header <div style="display:inline;background-color:red">My text</div></h2>
  More text
 </div> 

Answer 3

你可以消除float:right并替换为display:inline;

下面的图片