Home Web Front-end HTML Tutorial Is the tag li a block-level element analysis_HTML/Xhtml_Web page production

Is the tag li a block-level element analysis_HTML/Xhtml_Web page production

May 16, 2016 pm 04:41 PM
li block-level elements

Why can it set the height, but unlike the

elements, it feels like it is a "semi-inline" (inline: inline[text]-level) element. HTML 4 is described like this:

The following elements may also be considered block-level elements since they may contain block-level elements:

  • DD – Definition description
  • DT – Definition term
  • FRAMESET – Frameset
  • LI – List item
  • TBODY – Table body
  • TD – Table data cell
  • TFOOT – Table foot
  • TH – Table header cell
  • THEAD – Table head
  • TR – Table row

This description seems to be saying that <li /> is a "semi-inline" element. Of course, elements similar to <td /> in this list also gave me such doubts. Today I took a look at the default CSS of each browser. The result is this:

Browsers CSS
IE6/IE7 li{display:block;}
IE8 / Webkit / Firefox / Opera li{display:list-item;}

Here, it’s basically clear. In A-Grade browsers other than IE6/7, it is a "semi-inline" element. When it comes to display:list-item;, in fact, even though all A-Grade browsers now support it, not many people use it. Why? In fact, it is of no use. In Quirks Mode, PPK says this:

display: list-item means that the element is displayed as a list-item, which mainly means that it has a bullet in front of it (like an UL), except in IE 5 on Mac where it gets a number (like an OL). The numbers are buggy: all previous LI's in the page count as one, so this example starts with number 5 (the screenshot was made before I inserted my compatibility-LI's).

Live example:

display: block

display: list-item
display: list-item

Right. In fact, this does not mean much. But it can be regarded as solving one of my doubts. Share it. If you also have such doubts, maybe if a bug or other question arises next time when coding, you will probably be able to respond quickly.

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What element is li? What element is li? Aug 03, 2023 am 11:19 AM

li is an element in the HTML markup language and is used to create lists. li represents a list item, which is a child element of ul or ol. The role of the li tag is to define each item in the list. In HTML, the li element is usually used with the ul or ol element to create an ordered or unordered list. Unordered lists use the ul element, and list items are represented by the li element, while ordered lists use the ol element, also using li Element representation.

What is li in html What is li in html Nov 19, 2021 pm 03:31 PM

In HTML, the full English name of li is "list item", which means "list item". It is an element tag that defines a list item. The syntax is "<li>list item content</li>"; "<li>" tag Available in ordered list "<ol>" and unordered list "<ul>".

How to remove li default style in css How to remove li default style in css Jan 28, 2023 pm 02:09 PM

How to remove the li default style in css: 1. Create an HTML sample file; 2. Add the li tag content; 3. Set the "list-style-type" attribute to "none" in css to remove the li default style.

What are inline elements and block-level elements? What are inline elements and block-level elements? Aug 17, 2023 am 11:33 AM

Inline elements include div, p, h1-h6, ul, ol, li, table, form, etc.; block-level elements include span, a, img, strong, em, input, label, etc. The characteristics of the two elements: 1. Inline elements will occupy a row, automatically fill the width of the parent container, can set width, height, inner and outer margins and other attributes, and can contain other block-level elements and inline elements; 2. Inline elements will not It will occupy an exclusive line, the width and height are determined by the content, and the inner and outer margins only affect the arrangement of the elements themselves, etc.

What is the difference between inline elements and block-level elements? What is the difference between inline elements and block-level elements? Oct 16, 2023 am 09:51 AM

There are five differences between inline elements and block-level elements: "box model", "arrangement", "content display", "relative position" and "default size": 1. Inline elements do not generate independent boxes, width and height Determined by the content, block-level elements will generate an independent rectangular frame, and attributes such as width, height, margins, and padding can be set; 2. Inline elements are arranged horizontally on the same line, while block-level elements will be pressed from top to bottom. Arrange in order; 3. Inline elements cannot contain block-level elements, while block-level elements can contain other block-level elements and inline elements.

The difference between inline elements and block-level elements: an in-depth understanding of element classification in HTML The difference between inline elements and block-level elements: an in-depth understanding of element classification in HTML Dec 23, 2023 am 10:01 AM

The difference between inline elements and block-level elements: In-depth understanding of the classification of elements in HTML In HTML, elements can be divided into two categories: inline elements and block-level elements. Understanding their differences is very important to correctly master the layout and style of HTML. This article will provide an in-depth understanding of the characteristics of inline elements and block-level elements, and provide specific code examples. Inline elements Inline elements are elements that are displayed inline by default in HTML documents. They do not occupy an entire row, but appear closely within a row based on how the document flow is arranged. Common in the industry

What are the inline elements and block-level elements in html? What are the inline elements and block-level elements in html? Oct 16, 2023 am 09:57 AM

Commonly used inline elements and block-level elements in HTML are: 1. Block-level elements include semantics such as <div>, <p>, <ul>, <ol>, <li>, <h1>~<h6>, and <header>. tags; 2. Inline elements include tags such as <span>, <a>, <strong>, <em>, <img>, and <input>.

What are inline and block-level elements? What are inline and block-level elements? Nov 24, 2023 pm 01:57 PM

Inline elements include a, span, strong, b, em, i, label, img, input, select, textarea, button, abbr, cite, code, big, small, sub, sup, etc. Block-level elements include div, p, h1-h6, form, ul, ol, dl, dt, dd, li, table, tr, td, th, hr, blockquote, address, menu, pre, etc.

See all articles