Home >Web Front-end >HTML Tutorial >[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
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
- 2016-06-24 11:56:042072browse
Lists
- tag, and set
- 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.
- 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
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：CSS font_html/css_WEB-ITnoseNext article：CSS font_html/css_WEB-ITnose