将弹性框放在列表项目中是导致内容被看作是全线高度的下拉.
我一直在玩不同的CSS属性,比如给flexBox margin-top:0,它的子页边距:0,添加flex-wrap到flexBox等.没有骰子!
.wrapper { display: flex; } li { background: #ccc; }
<ul> <li> <div class="wrapper"> <div>hello</div> <div>world</div> </div> </li> </ul>
解决方法
我不知道究竟应该发生什么,因为这是各种规格的重叠
> CSS Display 3 – the list-item
keyword
> CSS Pseudo-Elements 4 – the ::marker
pseudo-element
> CSS Lists and Counters 3 – The ::marker pseudo-element
这是有问题的,因为它们是没有准备好实施的建议.请参阅CSS Lists 3 – Positioning Markers中的警告,这也与本期相关:
This section is not ready for implementation. It is an unreviewed
rough draft that hasn’t even been properly checked for
Web-compatibility. Feel free to send Feedback,but DON’T USE THIS PART
OF THE SPEC.
以下是我猜测Chrome如何处理引擎盖下的标记.
首先,我们使用更简单的list-style-position:在列表项中,并让它包含一个块:
ul { list-style-position: inside; } li { border: 1px solid blue; } div { border: 1px solid red; }
<ul> <li> <div>Hello<br />world</div> </li> </ul>
Chrome会像这样显示:
注意标记与div重叠,但缩小其第一行框.这种行为是浮动的典型!
浮点数不应与格式化上下文根重叠.例如,display:inline-block建立块格式化上下文.
ul { list-style-position: inside; } li { border: 1px solid blue; } div { display: inline-block; border: 1px solid red; }
<ul> <li> <div>Hello<br />world</div> </li> </ul>
所以像浮动一样,标记将其向右推,以防止重叠.
但注意标记是垂直对齐的.并建立一个具有overflow:hidden的块格式化上下文不会阻止重叠.
ul { list-style-position: inside; } li { border: 1px solid blue; } div { overflow: hidden; border: 1px solid red; }
<ul> <li> <div>Hello<br />world</div> </li> </ul>
所以它有一些浮动的行为,但它不是一个浮动.
我的猜测是,Chrome会继续迭代列表项中的第一个框,然后再重复列表项中的第一个框,等等,直到第一个框不再是块.然后它将标记插入它之前,显示为内联级(可能是内联块).这样的事情
var deepestFirstBlock,child = listItem; do { deepestFirstBlock = child; child = deepestFirstBlock.firstBoxChild; } while (child.style.display == 'block'); deepestFirstBlock.insertBefore(marker,deepestFirstBlock.firstBoxChild);
不完全是这样,因为如果最深的第一个块的方向是从右到左,则标记将被插入到第一行的最后一个框之后.
因此,正如Michael_B所注意到的那样,当您使用display来显示内部容器时:inline-flex没有空格.这是因为标记被插入到它之前,并且由于两者都是内联级别,它们并排出现.
ul { list-style-position: inside; } li { border: 1px solid blue; } div { display: inline-flex; border: 1px solid red; }
<ul> <li> <div>Hello<br />world</div> </li> </ul>
但是显示器:flex容器是块级.所以它被迫去下一行.空的空间是标记,它占据了第一行框.
ul { list-style-position: inside; } li { border: 1px solid blue; } div { display: flex; border: 1px solid red; }
<ul> <li> <div>Hello<br />world</div> </li> </ul>
这不会发生在display:block,也是块级别,因为标记被插入到其中.我猜这个标记没有插入到一个块级的Flex容器中,因为它将成为一个flex项目,它可能会产生一个奇怪的布局.
当您使用初始列表样式位置:在外面,似乎Chrome只是对标记应用某种负的水平边距,以便下面的框(这是插入标记之前的第一个)在左边对齐容器就像插入标记之前一样.也许标记也浮动,因为列表项中的浮动内容不再能够出现在其左侧.
但是,这个负余额将不允许块级Flex容器上升.这就是为什么这个空间仍然存在,即使标记不再在那里.
注意,这与目前未经审查的粗略草案相抵触,尚未准备好实施,其中表示具有列表风格位置的标记:外部应具有位置:标记和
An element with 07008 counts as 07009.
绝对定位的元素被取出流出,并重叠以下元素,因此Flex容器应该移动到顶部.
Firefox似乎做的更简单一些.使用list-style-position:inside,它只是将标记插入列表项的第一(内联级)框.它不会尝试迭代块以最深可能的级别插入标记.
然而,使用list-style-position:在外面,它可能需要标记out-of-flow,就像草图所说.这就是为什么你在Firefox中看不到空间.