Html无序列表ul li如何横向排列?两种方法实现横向排列

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无序列表横向排列的两种方法。

weinxin
我的微信
我的微信
微信扫一扫
 
admin
  • 本文由 admin 发表于 2024年6月15日
  • 转载请务必保留本文链接:https://www.cismin.cn/660.html