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

Question

我有以下简单的代码：

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

请参阅此fiddle

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

我知道我可以通过在“标题”文本之前移动“my text”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>

这表明你想要See This Fiddle

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;

下面的图片