html中怎样让多个li标签横排显示

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html中怎样让多个li标签横排显示相关的知识,希望对你有一定的参考价值。

li标签默认的是竖排显示,那么怎样让li标签横排显示呢

工具/原料

  • 一台电脑
  • Dreamweaver编辑器

方法/步骤

  1. 1

    利用Dreamweaver新建一个html页面

    技术分享
  2. 2

    在body里面输入代码

    <ul>

     <li>你好</li>

    <li>小鱼</li>

    <li>小小</li>

    </ul>

    技术分享
  3. 3

    默认的样式是这样的

    技术分享
  4. 4

    编辑li标签的css样式

    技术分享
  5. 5

    float:left代表的是元素左对齐。这样li标签就可以横排显示了,list-style:none用来去除li标签前面的小圆点。最终浏览器里面的效果如下图所示

    技术分享
    END

以上是关于html中怎样让多个li标签横排显示的主要内容,如果未能解决你的问题,请参考以下文章

怎么设置ul ,li标签元素横排且居中啊?

怎么设置ul ,li标签元素横排且居中啊?

怎么让ul中的li居中显示?

求ul中的li布局CSS布局,横向垂直都要居中,如何实现?

怎样让一个div里的多个div横向排列

html中表格怎样设置文字居中