Home > Article > Web Front-end > How to arrange CSS list horizontally
How to arrange CSS list horizontally
- 王林Original
- 2020-11-16 09:29:3312462browse
How 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!
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