css项目列表如何水平放置


列表项目默认分行排列,那么将列表项设置浮动就可以实现水平放置

1
li{ float : left ;}

示例如下:

  1. 创建Html元素

    1
    2
    3
    4
    5
    6
    < ul >
         < li >itemlist-1</ li >
         < li >itemlist-2</ li >
         < li >itemlist-3</ li >
         < li >itemlist-4</ li >
    </ ul >
  2. 设置css样式

    1
    2
    ul{ width : 500px ; height : 50px ; line-height : 50px ; padding : 10px  25px ; border : 4px  solid  #ebcbbe ;}
    li{ padding : 0  20px ; float:left ;}
  3. 观察显示效果


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM