首頁 > web前端 > html教學 > 用<ul><li>做一个二级导航 怎样使ul中的li竖着排列呢_html/css_WEB-ITnose

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

WBOY
發布: 2016-06-24 11:43:38
原創
3578 人瀏覽過

  • 地址

    • 北京

    •        
    • 天津

    •         
    • 上海

    •         
    • 河北

    •        
    • 山东

    •        
    • 山西

    •       
    • 河南

    •        
    • 安徽

    •       
    • 湖南

    •      
    • 陕西

    •        
    • 四川

    •      
    • 湖北

    •     


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


    回复讨论(解决方案)

    .sub-menu{-moz-column-count:3;-webkit-column-count:3;column-count:3;}
    登入後複製

    nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



    无标题文档




  • 地址


    • 北京

    •        
    • 天津

    •         
    • 上海


          

    • 北京

    •        
    • 天津

    •         
    • 上海



    • 北京

    •        
    • 天津

    •         
    • 上海





    将 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 属性。

    非常感谢

  • 來源:php.cn
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板