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

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

WBOY
Freigeben: 2016-06-24 11:43:38
Original
3580 Leute haben es durchsucht

  • 地址

    • 北京

    •        
    • 天津

    •         
    • 上海

    •         
    • 河北

    •        
    • 山东

    •        
    • 山西

    •       
    • 河南

    •        
    • 安徽

    •       
    • 湖南

    •      
    • 陕西

    •        
    • 四川

    •      
    • 湖北

    •     


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


    回复讨论(解决方案)

    .sub-menu{-moz-column-count:3;-webkit-column-count:3;column-count:3;}
    Nach dem Login kopieren

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

    非常感谢

  • Quelle:php.cn
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage