如果直接用以下代码写html列表，在前端是纵向显示的列表，而且还会字列表前面带有列表样式。
<ul><li>11</li><li></li>22</ul>
这里介绍两种方法来实现html无序列表横向排列：
1、用display:inline行内显示实现无序列表横向排列
主要是用display:inline，可以将列表在同一行内进行显示来实现。
list-style-type:none;//删除无序列表的项目符号
以下代码可以直接复制并保存为html格式进行运行。
<html>
<head>
<title>test</title>
<style>
ul{
list-style-type:none;//删除无序列表的项目符号
}
ul li{
display:inline;//横向排序
}
</style>
</head>
<body>
<ul>
<li><ahref='#'>首页</a></li>
<li><ahref='#'>栏目1</a></li>
<li><ahref='#'>栏目2</a></li>
<li><ahref='#'>栏目3</a></li>
<li><ahref='#'>栏目4</a></li>
</ul>
</body>
</html>2、用float浮动属性实现html无序列表横向排列
主要是用float:left;这个属性，float浮动向左或者向右都可以。
list-style-type:none;//删除无序列表的项目符号
以下代码可以直接复制并保存为html格式进行运行。
<html>
<head>
<title>test</title>
<style>
ul{
list-style-type:none;
}
ul li{
width:60px;
height:10px;
float:left;//或者用right根据自己需求
}
</style>
</head>
<body>
<ul>
<li><ahref='#'>首页</a></li>
<li><ahref='#'>栏目1</a></li>
<li><ahref='#'>栏目2</a></li>
<li><ahref='#'>栏目3</a></li>
<li><ahref='#'>栏目4</a></li>
</ul>
</body>
</html>以上就是实现html无序列表横向排列的两种方法。
评论