html中怎么让列表横向排列

时间2024-01-29 19:42:03发布访客分类JavaScript浏览749

导读：收集整理的这篇文章主要介绍了html中怎么让列表横向排列，觉得挺不错的，现在分享给大家，也给大家做个参考。htML中让列表横向排列的方法：1、使用float属性，只需要给列表的li元素添加“float: left;”样式即可；2、使用dis...

收集整理的这篇文章主要介绍了html中怎么让列表横向排列，觉得挺不错的，现在分享给大家，也给大家做个参考。

htML中让列表横向排列的方法：1、使用float属性，只需要给列表的li元素添加“float: left; ”样式即可；2、使用display属性，只需要给列表的li元素添加“display: inline; ”样式即可。

本教程操作环境：windows7系统、CSS3& & HTML5版、Dell G3电脑。

HTML创建一个列表：

!DOCTYPE html>
    html>
    	head>
    		style type="text/css">
			ul li{
    				list-style:none;
			}
    		/style>
    	/head>
    	body>
    		ul>
    			li>
    列表1/li>
    			li>
    列表2/li>
    			li>
    列表3/li>
    		/ul>
    	/body>
    /html>

怎么让列表横向排列？

1、使用float属性

ul li{
    	list-style:none;
    	float: left;
}

2、使用display属性

ul li{
    	list-style:none;
    	display: inline;
}