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

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

 ul  li a href= # 登录 /a /li  li a href= # 首页 /a /li  li a href= # 视频 /a /li  li a href= # 问答 /a /li  li a href= # 工具 /a /li  /ul 

html列表排列效果如下：

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

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

 ul  li a href= # 登录 /a /li  li a href= # 首页 /a /li  li a href= # 视频 /a /li  li a href= # 问答 /a /li  li a href= # 工具 /a /li  /ul 

ul{ list-style-type:none; //删除无序列表的项目符号ul li{ display:inline; //横向排序}

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

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

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

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

 html  body  style ul{list-style-type:none;}ul li{width:50px;height:10px;float:left;//或者用right根据自己需求 /style  li a href= # 登录 /a /li  li a href= # 首页 /a /li  li a href= # 视频 /a /li  li a href= # 问答 /a /li  li a href= # 工具 /a /li  /ul  /body  /html 

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

以上就是本篇文章的全部内容了，关于html列表的知识，大家可以参考html学习手册来进一步了解。

以上就是html无序列表怎么横向排列？html无序列表横向排列的方法的详细内容，html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。