我在body
上声明了display: inline
,但是元素仍然以块的方式显示。请帮助我理解这个概念。
直接在li
上声明display: inline
的工作原理如下:它们将以内联方式显示,但为什么在body
上声明时内联不适用于它们呢?
body {display: inline}
<body>
<ul>
<li>1234</li>
<li>5678</li>
</ul>
</body>
我也尝试过在li
上使用display: inherit
,但它仍然以块的方式显示,并且还删除了我不想要的标记:
一个二个一个一个
1条答案
按热度按时间a0x5cqrl1#
继承
display
在元素 * 上设置
display
将不会 * 让其子元素继承该值:虽然你可以声明元素从它们的祖先继承
display
,但我不推荐这样做(一般来说):display
与声明特定的display
值一样需要声明。为你的用例选择好的选择器是很重要的。对于你的简短例子来说,有一个通用的选择器是很好的,比如
body *
(用文字来说:"BODY
的所有后代"),它使用universal selector*
和descendant combinator ``。body *
的BODY
将 * 不会 * 被选择。还要注意descendant combinator
没有child combinator>
那么具体。下面是一个类似的例子:
一个二个一个一个
但是如果您仍然希望将元素声明为 * inherit *
display
,下面是一个示例:列表和
display
列表的默认值
display
是block
,其子列表(LI
)的值是list-item
.如果你只是想去掉标记,那么声明列表list-style-type: none
:但是您也可以将列表及其子列表(
ul, ul>*
)声明为display: inline
,注意删除填充需要另一个声明。带标记的内联列表
如果您想使用标记内联列表项,有几种可能性:
您可以通过声明list as
display: inline-flex
来保留内联列表项的::marker
。::marker
默认为列表项的outside
,这意味着它们可能会阻碍其他框的查看。将列表(或其项)声明为list-style-position: inside
以将标记保留在列表项的框内,从而防止此类溢出。flex-wrap: nowrap
是默认值,这与常规文本流不同。使用flex-wrap: wrap
可以使列表项(及其内容)像常规文本一样流动:一个10块一个11块一个12块一个
您还可以通过
::before
pseudo-element使用自定义"标记"。list-style-type: georgian
计数器:一个一个三个一个一个
列表项不继承
display
?您询问了为什么以下操作不会导致
LI
继承BODY
的display
值:这是因为-虽然
BODY
* 是 * 声明为display: inline
-但两者之间的列表具有默认的display
值block
。因为继承是从元素的直接祖先发生的,所以列表项将从列表继承值block
。可访问性问题
列表是语义元素,默认情况下由浏览器解释为语义元素。但是更改列表的样式可能会更改浏览器解释列表的方式,从而可能将列表的语义降低为包含文本的通用元素。
因此,通过ARIA-attribute
role
将列表及其项分别声明为list
和listitem
,通常可以确保列表被解释为列表。这会 * 否决 * 浏览器将元素解释为列表的决定,即使浏览器由于某些CSS而决定不将其解释为列表。另一点是伪元素(例如
::marker
,::before
)在技术上不是文档的一部分,因此不能与之交互(例如selecting or copying)。如果你需要它们作为文档的一部分,那么就直接将它们包含在文档中。