Use inline-block to layout the text list

YSS has two la s for the current graphic list:

One is the form method, and the other is the Li method.

YSS is talking about the Li method today, but it is based on an innovation.

The innovation lies in setting Li in the inline-block mode.

/* Inline-block Description */
IE6 & 7 does not support inline-block. You need to use hack to solve this problem:
Therefore, the inline-block statement is as follows:
Display: inline-block;
* Display: inline;
* ZOOM: 1;
This leads to a result. IE is the bottom alignment.
But by setting the CSS: vertical-align: Top;, this problem is perfectly solved.

Advantages: 1. Don't worry about the high inconsistency of each Li (high inconsistency will lead to chaotic layout of text and text, such as line breaks );

Disadvantages: 1. There cannot be spaces between each Li, including ul;

The corresponding HTML structure is as follows:

<! Doctype HTML> 
The above is just for the convenience of viewing the Code. If you need to view it, copy it directly and remember to remove the spaces between Li ~