Question

我有以下内容：

Text text text2 text text
text text text text text.

在某些时候我将其替换为：

Text text <div class="highlight" style="background-color:red;">text2</div> text text
text text text text text.

但是它推动了文本，我怎么能让它保持与以前相同的顺序？

这就是我的尝试：

float:left;

和

parent().css('overflow', 'auto');

它没有用。
你知道任何解决方案吗？

提前致谢。

Answer 1

您有两种解决方案：

1）只需使用span代替div

2）您可以使用div，但必须定义以下样式

div.highlight {
  display:inline;  
}

在这里，您可以找到第二个解决方案的演示：http://jsfiddle.net/smWvA/2/

Answer 2

您可以使用span而不是div

Text text <span class="highlight" style="background-color:red;">text2</span> text text
text text text text text.

Answer 3

Div默认为display:block，这是影响效果的原因。

因此，您可以使用SPAN insteed，inline作为属性的默认值display

如果您想了解有关display属性的更多信息，请查看： https://developer.mozilla.org/en/CSS/display

Answer 4

你可以检查一下类突出显示是否没有它继承的任何父css。尝试查看text2的“Computed Style”。

Google Chrome： F12 ，找到你的元素要么简单地右键单击text2并检查Element。

Computed Style位于inspect元素窗口的右上角

Answer 5

我在jsfiddle上做了一个例子。如果您决定使用div，则必须指定display：inline或inline-block。默认情况下，Span是内联的，因此最好在此处使用span ...