Home >Web Front-end >HTML Tutorial >Is the tag li a block-level element analysis?
Block-level elements: block-level, I believe everyone knows it (or Google it). When I was writing code in the past, I always felt strange when facing the
tag. 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:
This description seems to be saying that <li />
is a "semi-inline" element. Of course, elements similar to <td />
in this list have also caused me such doubts. Today I took a look at the default CSS of each browser. The result is this:
Browsers | CSS |
---|---|
IE6/IE7 |
li{<a href="//m.sbmmt.com/wiki/927.html" target="_blank">display</a>:block; } |
li{display:list-item;}
|
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:
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.display: list-item
Live example: display: blockdisplay: list-itemdisplay: list-itemmeans 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).
The above is the detailed content of Is the tag li a block-level element analysis?. For more information, please follow other related articles on the PHP Chinese website!