当前位置:Gxlcms > html代码 > 用<ul><li>做一个二级导航怎样使ul中的li竖着排列呢_html/css_WEB-ITnose

用<ul><li>做一个二级导航怎样使ul中的li竖着排列呢_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:118人阅读

  • 地址


  • 怎样实现ul里像图片中这种效果呢


    回复讨论(解决方案)

    .sub-menu{-moz-column-count:3;-webkit-column-count:3;column-count:3;}





    无标题文档




  • 地址



  • 将 div 元素中的文本分为三列:
    div
    {
    -moz-column-count:3; /* Firefox */
    -webkit-column-count:3; /* Safari 和 Chrome */
    column-count:3;
    }

    Internet Explorer 10 和 Opera 支持 column-count 属性。
    Firefox 支持替代的 -moz-column-count 属性。
    Safari 和 Chrome 支持替代的 -webkit-column-count 属性。
    注释:Internet Explorer 9 以及更早版本的浏览器不支持 column-count 属性。
    定义和用法
    column-count 属性规定元素应该被划分的列数。
    默认值: auto
    继承性: no
    版本: CSS3
    JavaScript 语法: object.style.columnCount=3
    语法
    column-count: number|auto;
    值 描述 测试
    number 元素内容将被划分的最佳列数。 测试
    auto 由其他属性决定列数,比如 "column-width"。 测试




    规定列间 60 像素的间隔

    注释:Internet Explorer 不支持 column-count 属性。

    非常感谢

    人气教程排行