List <ul><dl> and so on by default is the vertical arrangement. We need it to be arranged horizontally, usually with float, but using float also usually causes some typographical problems. Today I learned another way:
Set the display:inline of the <li> tag, set the <li> to inline element to achieve the effect of horizontal arrangement, do not need to use float.
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><title>Another way to arrange the list horizontally</title><styletype= "Text/css">ul Li{Display:inline;background:#F93;padding:5px;}}</style></Head><Body><ul> <Li>Item1</Li> <Li>Item2</Li> <Li>Item3</Li> <Li>Item4</Li></ul></Body></HTML>
Effect:
Wait, why is there a gap between Li???
The solution is: write Li as a line
<ul> <Li>Item1</Li><Li>Item2</Li><Li>Item3</Li><Li>Item4</Li></ul>
Yes, it's written like this (I don't know if it's a bug)
This method has a disadvantage: after Li to inline elements, width, height is invalid, can only use padding to open the width of the high. There are some inconveniences. Make your own choices as needed.
(Personal original, reproduced please specify and attached link)
Another way to arrange the "CSS tricks" list horizontally