CSS规范缺陷？无法设置本元素换行而后面元素不换行？

starmars · 发表于 2020-6-19 10:55:26

A
B
C
D
E
F
G
H
I

对于上面这个HTML，想显示成如下效果：
ABC
DEF
GHI
在CSS中应该如何设置呢？这个小例子是对词库排版时经常可以遇到的问题。

要想让D相对于前面内容换行，它自己就必须设置成block（不能靠前面的id="3"标签设置成block来实现，否则id="3"标签就与id="2"标签不在同一行了）；而后面id="5"要与id="4"同行，id="4"又必须设置成inline —— 这正好是矛盾的,无法实现。

CSS规范似乎只能设置某标签是否独占一行，而缺少换行方面的设置机制：如果想对某标签的内容相对于前面标签内容是否换行显示的设置，仅仅影响本标签自己，至于本标签后面的标签相对于本标签是否换行完全由后面标签自己来设置而不受前面本标签样式的影响 —— 这是达不到的？！

不知现有规范有何方案能达到以上目的？

atauzki · 发表于 2020-6-19 11:58:16

本帖最后由 atauzki 于 2020-6-19 12:02 编辑

Chrome测试通过, 参考文章：https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-of-type

<!doctype html>+ d; ]2 t ?- q. J# i
<head>
/ c/ G# m3 a5 N4 K5 P$ e8 M( | s
<style>7 i: | G& s* g& Y( y3 @6 m5 U; f( G
.main>span:nth-of-type(3n):after{content:"\A";display:block}
, J- u8 V8 c2 P4 z
</style>
8 Q4 t: u5 c2 A1 }$ a& T) d( P
</head>6 I5 {7 T4 F6 @5 X7 Y
<body>6 ^7 ], W3 c& _, l0 d, G4 [
<div class="main">9 }* A& W+ g6 z
A
2 I* X- J/ Q: s
B: S, N# R+ X0 ]) _( A, r. `( q
C, b! U8 ^/ _' p" I/ f+ M* |, s; F
D
6 B1 \& U/ }0 |' } [6 Z) H! U3 p
E
6 v G# z3 `( ]# o( }! \* ]; z
F
. ~$ M4 O/ y6 k" ?, t9 S! ?
G+ s P' |; L9 c( s7 O
H
. C* }! _, o' R# J& J! M% A% r
I, p: s3 U/ n1 i1 r0 R4 U- O$ [/ I
</div>4 `7 M$ A* h6 l9 {6 Z6 F
</body>

复制代码

dfliaoyue · 发表于 2020-6-19 19:31:55

利用伪元素，插入一段空的block即可。
#3::after {content:''; display: block;}

starmars · 发表于 2020-6-21 09:02:45

问题得到解决了。多谢atauzki dfliaoyue两位好心人！
怎么都还是感觉CSS应该推出一个正式的样式专门解决这个问题，而不要用伪类这种间接的方法实现。

		自动登录	找回密码
密码			免费注册

[讨论] CSS规范缺陷？无法设置本元素换行而后面元素不换行？