css怎样实现ul和li横向罗列-百分百源码网

css怎样实现ul和li横向罗列

发布时间：09/01 来源：未知浏览：关键词：

本文来自CSS入门教程栏目，文中为大家介绍了css实现ul和li横向罗列的办法，拥有一定的参照价值，但愿可以帮忙到大家。由于li是块级元素，所以想实现横向罗列可以通过如下办法：【float:left】。

（举荐教程：CSS入门教程）

*display:inline;
*zoom:1;




CSS + ul li 横向罗列的两种办法 


  
  
    superbirds
    superbirds    
    superbirds
    superbirds

css代码一：

* {
    margin: 0;
    border: 0;
    padding: 0;
    font-size: 13pt;
}
  
#nav {
    height: 40px;
    border-top: #060 2px solid;
    border-bottom: #060 2px solid;
    background-color: #690;
}
  
#nav ul {
    list-style: none;
    margin-left: 50px;
}
  
#nav li {
    display: inline;
    line-height: 40px;
    float:left
}
  
#nav a {
    color: #fff;
    text-decoration: none;
    padding: 20px 20px;
}
  
#nav a:hover {
    background-color: #060;
}

css代码二：

* {
    margin: 0;
    border: 0;
    padding: 0;
    font-size: 13pt;
}
  
#nav {
    height: 40px;
    border-top: #060 2px solid;
    margin-top: 100px;
    border-bottom: #060 2px solid;
    background-color: #690;
}
  
#nav ul {
    list-style: none;
    line-height: 40px;
    margin-left: 50px;
}
  
#nav li {
    display: block;
    float: left;
}
  
#nav a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 0 20px;
}
  
#nav a:hover {
    background-color: #060;
}

相干视频教程举荐：css视频教程

以上就是css怎样实现ul和li横向罗列的细致内容，更多请关注百分百源码网其它相干文章！

打赏