Home >Web Front-end >CSS Tutorial >How to arrange CSS list horizontally
##Idea: Set the display:inline of theHow to arrange the CSS list horizontally: You can use the [display:inline] attribute to set the [
] tag as an inline element to achieve the horizontal arrangement effect. The display attribute specifies the type of box the element should generate.
css video tutorial)
Attribute introduction: The display attribute specifies the type of box that the element should generate. Specific code:<!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:
##Problem:
li between There is a gap
Solution:
Write li in one line
<ul> <li>Item1</li><li>Item2</li><li>Item3</li><li>Item4</li> </ul>
Effect:
##Related recommendations:CSStutorial
The above is the detailed content of How to arrange CSS list horizontally. For more information, please follow other related articles on the PHP Chinese website!