如何让span标签里的元素不换行显示？

lbhl

今天做词库碰到一个奇怪的问题。大概是这么个样子的词库的词头，为简化列出仅一个例句：
. B. Y' j# n2 W( ~<link href="test_style.css" rel="stylesheet" type="text/css"><div class="exg"><div class="ex"> <em>we found that all the seats were taken</em></div></div><span class="chnexample">我们发现所有的位置都被占了。</span>
默认中文例句翻译会另起一行，现在想让它与英文例句同一行紧接英文例句后面显示不要换行。
/ c+ n+ u: `9 B: J) y; a于是在test_style.css里写了：
( Z9 O. Y  n5 F  ?  @6 vdiv.exg {
display: inline;
} span.chnexample {
! Y+ E4 `# f) Y2 J( V* `display: inline;
}
令人意外的是死活它还是要换行，就是不挪到前一行里去显示。
3 Y* n$ x1 h& Y* G( a
* ]$ ^, L! L  o可能我CSS没学好，有高人指点一下？

Tenteny

1. <p><span>some text.</span>some other text.</p>

复制代码

( T: j% D$ A3 p: e$ B5 f$ v: w如果HTML是这样，那么<span>标签的内容自然会与上一级标签的内容在同一行，也不需要CSS；
但现在属于下列这样：

1. <p>some other text.</p><span>some text.</span>

复制代码

0 a/ v9 l' w6 V  i; u: F1 U7 l" K要达到仅释义不分行的效果应该只能改变嵌套关系。

/ J: ^: Z9 i, Z9 u6 w9 c我也不是很精通，提一个看法。





% L' f/ [# g+ j6 a  L9 q% u. q3 z

mtaa

) y$ N' {+ H1 x4 j% T: Fdiv.ex也改为inline，然后检查下宽度。

awesomee

1. div.ex,div.exg{
   
2. display: inline;
   ! `# ^1 [$ o: t2 i: ~/ N
3. }
   . P9 ~8 @' T- h) E3 h
4. 
   ; \9 L- d- c1 b. ?4 U" C2 \
5. span.chnexample {
   ) M- H6 M3 h. O4 e
6. display: inline;
   ! N; q) U2 S- P8 j& l' n8 M
7. }

复制代码