Home > Article > Web Front-end > [CSS Tips] Another way to arrange the list horizontally_html/css_WEB-ITnose
[CSS Tips] Another way to arrange the list horizontally_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:56:042003browse
Listsff6d136ddc5fdfeffaf53ff6ee95f1855c69336ffbc20d23018e48b396cdd57a etc. are arranged vertically by default. When we need it to be arranged horizontally, we usually use float to achieve it, but using float usually causes some typesetting problems. Today I learned another method:
Set the display:inline of the 25edfb22a4f469ecb59f1190150159c6 tag, and set 25edfb22a4f469ecb59f1190150159c6 as an inline element to achieve the effect of horizontal arrangement without using float.
<!doctype html><html><head><meta charset="utf-8"><title>列表横向排列的另一种方法</title><style type="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 the li's? ? ?
The solution is: write li in one line
<ul> <li>Item1</li><li>Item2</li><li>Item3</li><li>Item4</li></ul>
Yes, it is written like this (I don’t know if it is a bug)
This method has a drawback: after li is converted to an inline element, width and height are invalid, and padding can only be used to expand the width and height. There are also some inconveniences. Make your own choice based on your needs.