css - 如何让这个 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 中显示的方式 - “我的文本”显示在同一行的“页眉”右侧。然而，在 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>

这正是您想要的See This Fiddle