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>
    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>
    /body>
    /html>
    

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

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

以上就是html无序列表怎么横向排列？html无序列表横向排列的方法的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！