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

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

WBOY
Libérer: 2016-06-24 11:43:38
original
3578 Les gens l'ont consulté

  • 地址

    • 北京

    •        
    • 天津

    •         
    • 上海

    •         
    • 河北

    •        
    • 山东

    •        
    • 山西

    •       
    • 河南

    •        
    • 安徽

    •       
    • 湖南

    •      
    • 陕西

    •        
    • 四川

    •      
    • 湖北

    •     


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


    回复讨论(解决方案)

    .sub-menu{-moz-column-count:3;-webkit-column-count:3;column-count:3;}
    Copier après la connexion

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

    非常感谢

  • source:php.cn
    Déclaration de ce site Web
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
    Tutoriels populaires
    Plus>
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal