利用 CSS 设计 ul li 横向水平显示

许多人都在问要如何利用 CSS 设计 ul li 横向水平显示?其实这不算是个很困难的技术,CSS 本身就有几个属性可以做出这种效果,包含 float 与 display 的属性,float 就是浮动效果,而 display 则是控制显示的属性,这两种属性可以做出 ul li 横向水平显示的效果,可是有一点点的差异,我们这里马上来看个简单的范例就知道了。


范例一、利用 CSS 的 float 属性制作ul li 横向水平显示效果



  • 猪肉

  • 鸡肉

  • 牛肉



  • 猪肉

  • 鸡肉

  • 牛肉

范例的效果

  • 猪肉
  • 鸡肉
  • 牛肉
  • 猪肉
  • 鸡肉
  • 牛肉

我们在范例一中准备了两组 ul li 标签,第一组()并未使用 CSS 的 float 属性,所以项目符号是默认的由上而下排列,而第二组(Exa1)则使用了 CSS 的 float 属性,让每一组

  • 项目都变成水平排列。

    范例相关语法参考解说

    1. CSS float 浮动
    2. CSS margin 边界使用介绍范例教学
    3. CSS border 边框设计

    范例二、利用 CSS 的 display 属性制作ul li 横向水平显示效果



    • 猪肉

    • 鸡肉

    • 牛肉

    范例的效果

    • 猪肉
    • 鸡肉
    • 牛肉

    范例二利用的是 CSS 的 display:inline 效果,让每个项目变成水平排列,跟范例一的效果类似,不过 display:inline; 会自动让每个项目前面的黑点消失,这是很大的差别,关于显示设定请参阅《CSS display 属性用法介绍 display:block 与 display:inline》解说。

    虽然经过两个范例显示出 float 与 display:inline 产生的 ul li 横向水平显示差异,不过要让项目前面的符号消失,甚至改用其它符号显示也不一定要用 display 属性,请参阅《CSS list-style-type 列表开头显示符号》篇的内容。

    boniuav的牛爱网