logo标签列表

在HTML中，li标签是行内元素还是块级元素？

htmltags
4

我很好奇HTML中的li标签是内联元素还是块级元素？

我发现在p标签中使用li标签会换行，所以它像是一个块级元素，但它嵌套在ul标签或ol标签中。

从这个角度来看，它更像一个内联元素。哪一个是正确的呢？

2
块级元素和行内元素不再是HTML5中使用的区分方式；请参见https://developer.mozilla.org/en/docs/Web/HTML/Block-level_elements中“块级元素与行内元素”的最后一部分。根据https://www.w3.org/TR/html/grouping-content.html#the-li-element，`<li>`是“流内容”。 - Ry-
5个回答
3
1
0

这毫无意义，因为li元素必须与块级别的ul或ol出现。

-1

注意：这是故意无效的标记，以证明块上下文的重要性。

<!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>

W3School对内联元素和块级元素的定义如下：

  1. 内联元素不会在新行上开始，只占据必要的宽度。
  2. 块级元素总是在新行上开始，并占据可用的全部宽度（向左和向右伸展尽可能远）。

正如您在上面的示例中所看到的，即使我在li标签中输入了“Hello”，并紧接着输入了“World”，单个li标签也不允许“World”与“Hello”在同一行。这证明了li标签占据了100%的可用宽度，证明了li是一个块级元素。

这就是我的观点。

4
W3Sch**ls并非任何标准的来源，而且您的HTML无效。 - Ry-
我故意编写了无效的HTML代码，以展示li标签不允许任何元素占据整个可用空间的行。我并不是说这是任何标准的来源，它只包含了一般的基本定义，类似于维基百科，它并不在于正确性，而在于通过示例证明某些东西。 - Sagar
2
使用无效的标记使演示变得毫无意义。 - Ry-
为什么这个答案一直被踩？如果我通过实际例子来澄清某人的概念，那又怎么样呢？ - Sagar
-1

由于它们以堆叠方式一个接一个地放置，因此它是块级元素。

我提供了w3c文档链接，您可以在其中找到更多信息。 访问此链接。

enter image description here

1
那个部分是关于<dd>的内容，而不是<li>本身。 - Ry-
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接