如果直接用以下代码写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无序列表横向排列的两种方法。
搭建电商网站用Shopify还是Woocommerce？或者是用opencart
小型企业电商网站的选择：Shopify和WooCommerce都是非常受欢迎的选择，各有优劣，具体选择哪一个，需要根据您的实际需求和技术水平来综合考虑。 Shopify vs WooCommerce ...
Guest Posts：高端外链策略
Guest Posts直译为“客座文章”或“客座日志”，简单说来就是我要在某个知名的高权重博客上发表文章，通过这个博客的知名度和读者群来推广自己的博客或网站，从而获得高质量的流量和Backlink。当...
谷歌英文关键词搜索：为什么95%的人都是错误的
关键词搜索(Keyword Research)可以说是做Niche和Affiliate的关键，找到一个有价值的关键词也就意味着你已经成功了80%，剩下的20%只需要你按部就班的执行和操作就可以了。但是...
宝塔面板出错AttributeError: module ‘public’ has no attribute ‘get_size_total’
AttributeError: module 'public' has no attribute 'get_size_total' REQUEST_DATE: 2024-07-03 11:10:50 ...
我的微信
我的微信
微信扫一扫
评论