码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-04-03 10:21:22      阅读:349      评论:0      收藏:0      [点我收藏+]

标签:

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标签横排显示

标签:

原文地址:http://www.cnblogs.com/i65535/p/5349193.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!