Blank spacing of inline-block elements in css

Solution

The third method is to set the font of the parent element to "0", and then reset the font size on the "inline-block" element.

The code is as follows:	Copy code
Ul { List-style: none outside none; Padding: 10px; Background: green; Text-align: center; Font-size: 0px;     } Ul li { Display: inline-block; * Display: inline; Zoom: 1; Background: orange; Padding: 5px; Font-size: 12px; }

The above method is ff, gg browser is good, but it still does not work in other browsers. Finally, I will introduce a jquery solution.

Jquery method

Finally, we provide you with a jquery method:

The code is as follows:	Copy code
HTML code <Ul class = "removeTextNodes"> <Li> item1 </li> <Li> item2 </li> <Li> item3 </li> <Li> item4 </li> <Li> item5 </li> </Ul>   CSS code Ul { List-style: none outside none; Padding: 10px; Background: green; Text-align: center; Font-size: 12px; } Ul li { Display: inline-block; * Display: inline; Zoom: 1; Background: orange; Padding: 5px; }

 

JQuery code

The code is as follows:	Copy code
$ ('. RemoveTextNodes'). contents (). filter (function (){ Return this. nodeType = 3; }). Remove ();

The last method is to use jQuery to change the value of "nodeType" to achieve the desired effect.