html无序列表怎么横向排列？

　　首先我们来看一下html列表排列最简单的代码：

　　<ul>

　　</ul>

　　html列表排列效果如下：

　　2345截图20181009094711.png

　　从上述代码可以看到最简单的实现列表排列是纵向的，所以，下面我们就来具体说一说怎么实现html无序列表横向排列。

　　我们直接来看html无序列表横向排列的简单实现代码：

　　<ul>

　　</ul>

　　ul{

　　list-style-type:none;//删除无序列表的项目符号

　　}

　　ulli{

　　display:inline;//横向排序

　　}

　　html无序列表横向排列的效果如下：

　　2345截图20181009101614.png

　　除了上述方法实现html无序列表横向排列，在html中列表向横排列的实现还可以利用float浮动属性。

　　float:left;代表想做浮动，也就是横向排列是向左边排列；float:right;代表想做浮动，也就是横向排列是向右边排列。（可根据实际情况选择）

　　我们来看具体html无序列表横向排列的代码。

　　<html>

　　<body>

　　<style>

　　ul{list-style-type:none;}

　　ulli{

　　width:50px;

　　height:10px;

　　float:left;//或者用right根据自己需求

　　}

　　</style>

　　<ul>

　　</ul>

　　</body>

　　</html>

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h54596.shtml