html无序列表ul li怎么横向排列?两种方法横向排列

admin
admin
admin
272
文章
40
评论
2021年12月19日20:16:47
评论
128
公众号运营教程从入门到提高全套视频教程下载

html无序列表ul li怎么横向排列?两种方法横向排列

如果直接用以下代码写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无序列表横向排列的两种方法。

admin
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: