css - 如何让这个 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 中想要的方式——“我的文本”显示在同一行的“标题”右侧。但是，在 Chrome 中，“我的文本”被下推到“更多文本”旁边的一行。

我知道我可以通过在“标题”文本之前移动“我的文本”div 来实现这一点：

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

但由于其他原因，我需要保持 html 的原样，并希望尽可能使用 css 来完成此操作。有没有办法让它在 Chrome 中显示我想要的方式（只需更改 css）？

score 2 · Accepted Answer

你可以这样使用

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

这正是你想要的看这个小提琴

score 0 · Accepted Answer

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

    <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>

score 0 · Accepted Answer

0

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

下图

在此处输入图像描述

于 2012-12-27T08:20:14.143 回答

3 回答 3