掌上百科 - PDAWIKI

 找回密码
 免费注册

QQ登录

只需一步,快速开始

查看: 452|回复: 3

[求助] 如何让span标签里的元素不换行显示?

[复制链接]
  • TA的每日心情

    2019-9-23 23:38
  • 签到天数: 8 天

    [LV.3]偶尔看看II

    发表于 2020-2-15 23:19:15 | 显示全部楼层 |阅读模式
    今天做词库碰到一个奇怪的问题。大概是这么个样子的词库的词头,为简化列出仅一个例句:
    % i  V: _5 a3 y6 W2 J0 `, K<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>% O) q( ~( z9 @% _7 b
    默认中文例句翻译会另起一行,现在想让它与英文例句同一行紧接英文例句后面显示不要换行。
    1 t  j/ o) W& i0 O于是在test_style.css里写了:1 }5 [9 I+ [. X. H
    div.exg {
    2 e& a2 J# @5 z, y* y# ]' idisplay: inline;
    & p+ L* x7 t% ]' ^} span.chnexample {0 ^# T0 T! `0 H; x) e
    display: inline;1 `9 B% B6 ~4 p, v
    }
    9 c  \6 S# `) {5 v- k* H- ]令人意外的是死活它还是要换行,就是不挪到前一行里去显示。
    2 t% w" u; K- t* s" L
    . i  K/ q  k5 a0 F7 U5 m可能我CSS没学好,有高人指点一下?
  • TA的每日心情
    开心
    2021-9-8 18:36
  • 签到天数: 67 天

    [LV.6]常住居民II

    发表于 2020-2-16 01:17:51 | 显示全部楼层
    1. <p><span>some text.</span>some other text.</p>
    复制代码
    5 x6 l8 W2 o# {- q' F2 m' _+ p( _
    如果HTML是这样,那么<span>标签的内容自然会与上一级标签的内容在同一行,也不需要CSS;
    # s  B) L- `5 X3 ~5 [% ~但现在属于下列这样:
    $ X1 ]7 h6 Z( \; g. ^2 q% V9 ?
    1. <p>some other text.</p><span>some text.</span>
    复制代码
    0 e4 P, g" r. M$ M* f# t
    要达到仅释义不分行的效果应该只能改变嵌套关系。) ], Z$ Y, ?4 N5 Z% w* L0 h7 c
    ' B& M: {" Y1 n5 U4 G9 U4 H
    我也不是很精通,提一个看法。. ~7 H3 F. M" N! k/ I: Y  N% `

    0 w. F0 J- l: r$ I# m: R
    " ?, K0 _. c. \4 ^3 E1 I. o
    # R+ Z# `: Z: i& P. u  ^$ }3 Q
    1 F3 p- w- T( Q; @" X4 b
    5 S. \' j! l3 R% D8 u
  • TA的每日心情

    2023-3-29 00:54
  • 签到天数: 344 天

    [LV.8]以坛为家I

    发表于 2020-2-16 06:39:52 | 显示全部楼层
    本帖最后由 mtaa 于 2020-2-16 06:48 编辑
    . t' v' H2 T5 l" g# Z7 L/ Y5 _5 l! \' _2 B4 w3 g9 p: d
    div.ex也改为inline,然后检查下宽度。
  • TA的每日心情
    慵懒
    2020-3-7 10:49
  • 签到天数: 34 天

    [LV.5]常住居民I

    发表于 2020-2-16 13:15:04 | 显示全部楼层
    1. div.ex,div.exg{# N6 S8 z8 H) `& |* ?; l  ]
    2. display: inline;# b3 |+ c  F, [; P/ q5 X* u1 M8 `, h
    3. }
      - v4 ~/ z) r: l

    4. + k& @0 C; g+ W# b& ?  P
    5. span.chnexample {
      7 k7 S0 _/ k' L, i0 b
    6. display: inline;1 J/ p5 c+ p* j7 O. C/ W9 O1 N
    7. }
    复制代码
    您需要登录后才可以回帖 登录 | 免费注册

    本版积分规则

    小黑屋|手机版|Archiver|PDAWIKI |网站地图

    GMT+8, 2024-3-28 23:03 , Processed in 0.030239 second(s), 8 queries , MemCache On.

    Powered by Discuz! X3.4

    Copyright © 2001-2023, Tencent Cloud.

    快速回复 返回顶部 返回列表