How to align the two sides of the list in css (inline-block + justify)

Text-justify version: IE5 + private property inheritance: None
 
Syntax:

1. text-justify: auto | inter-word | newspaper | distriify | distribute-all-lines | inter-ideograph parameter:
 
Auto: allows the browser user agent to determine the two-end alignment rules used
Inter-word: align text by adding spaces between words. This behavior is the fastest way to align all text rows. The alignment at both ends of the paragraph is invalid for the last line of the paragraph.
Newspaper: align text by adding or removing spaces between words or letters. Is the most precise format used for alignment at both ends of the Latin alphabet
Distribute: processing spaces is similar to newspaper. It is applicable to East Asian documents. Especially Thailand
Distribute-all-lines: the two ends are in the same way as distribute, and they do not contain the last line of the two section alignment. Applies to ideographic documents
Inter-ideograph: provides full two-end alignment for ideographic text. He adds or removes spaces between ideographic words and words.
 
Note:
 
Sets or retrieves the alignment of text in an object.
The script feature is textJustify.

Applicable conditions:

1. The li spacing width of a row is smaller than the sum of the Two li widths;
2. The number of li resources is just full.

Most of condition 1 can be met, so it is mainly because the row is full.

Related code snippets

The code is as follows:	Copy code
Ul { Text-align: justify; Text-justify: distriify; Font-size: 0; Letter-spacing:-4px;/* fixed the bug of inconsistent inline-block gap performance */ } Ul li { Display: inline-block; * Display: inline; * Zoom: 1; Font-size: 12px; Letter-spacing: 0; Vertical-align: top; } Ul li. justify_fix { Width: 100%; Height: 0; Line-height: 0; Font-size: 0; Overflow: hidden; Margin: 0; Padding: 0; }

The html structure is as follows:

The code is as follows:	Copy code
<Div class = "container"> <Ul> <Li> </li> <Li> </li> <Li> </li> <Li> </li> <Li> </li> <Li> </li> <Li> </li> <Li> </li> <Li> </li> <Li> </li> <Li> </li> <Li> </li> <! -- A li must be blank to fix the bug --> <Li class = "justify_fix"> </li> </Ul> </Div>