简体   繁体   English

html 中的 li 标签是内联级元素还是块级元素?

[英]Is li tag in html a inline-level or block-level element?

I really wonder is a li tag in HTML a inline-level or block-level element?我真的很想知道 HTML 中的li标签是内联级元素还是块级元素?

I find that a li tag in a p tag can break a new line, so it's kind of like a block, but it's embedded in a ul tag or a ol tag.我发现p标签中的li标签可以换行,所以它有点像块,但它嵌入在ul标签或ol标签中。

From this point of view, it's kind of like a inline-level element?从这个角度来看,它有点像内联级元素? Which is right?哪个是对的?

dd, dt and li are listing items in HTML so I think block level elemnt's rule will work same for all dd, dt and li. dd、dt 和 li 在 HTML 中列出项目,所以我认为块级元素的规则对所有 dd、dt 和 li 都适用。 For more solid proof visit this link如需更可靠的证据,请访问此链接

https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

here you will find all block level element listed.在这里您将找到列出的所有块级元素。

在此处输入图片说明

An li element has a default display value of: li元素的默认显示值为:

display:list-item

https://www.w3schools.com/cssref/css_default_values.asp https://www.w3schools.com/cssref/css_default_values.asp

If it is set to display:block the default bullets will be hidden.如果设置为display:block ,默认项目符号将被隐藏。

这确实没有实际意义,因为li元素必须与块级ulol

Since it places theme selves one after one in a stacked manner, it is a block level element.由于它以堆叠的方式一个接一个地放置主题,因此它是一个块级元素。

I am providing w3c documentation link where you can find more about this.我提供了 w3c 文档链接,您可以在其中找到更多相关信息。 visit this link .访问此链接

在此处输入图片说明

NOTE: This is intentionally invalid markup to prove a point about block context.注意:这是故意无效的标记,以证明有关块上下文的观点。

 <!DOCTYPE html> <html> <body> <div style="background-color:black;color:white;padding:20px;"> <p> <ul> <li>Hello</li>World </ul> Sagar </p> </div> </body> </html>

The W3School Definition of Inline and Block Element Stands as follows: W3School 对内联和块元素的定义如下:

  1. An inline element does not start on a new line and only takes up as much width as necessary.内联元素不会从新行开始,只会占用必要的宽度。
  2. A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).块级元素总是从新行开始并占据可用的整个宽度(尽可能向左和向右伸展)。

As you can see in the example above, even though I typed "Hello" inside of the li tag and immediately followed it with "World", the single li tag will not allow the "World" to be on the same line.正如你在上面的例子中看到的,即使我在li标签内输入了“Hello”并紧跟在它后面是“World”,单个li标签不会允许“World”在同一行上。 This demonstrates that the li tag is taking 100% of the available width, proving that li is a block level element.这表明li标签占用了 100% 的可用宽度,证明li是块级元素。

That is my point of view.这是我的观点。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM