CSS完成ul和li横向排序的两种方式

日期:2021-01-20 类型:科技新闻 

关键词:网页设计,移动端网页设计,大一网页设计作业成品,网页编辑软件,网页在线编辑

由于li是块级元素,默认设置占1行的,要想完成横向排序,1般根据下列两个方式:

float:left
这样设定有1个难题,li波动之后则摆脱了文字流,即不占部位,假如它的父级元素有实际的款式且沒有固定不动宽高,提议父元素消除波动,或设定固定不动宽高

display:inline-block

即把li变成行内元素且能够设定宽高和边距,这样也是有1个难题,低版本号的Ie访问器兼容问题inline-block,提议在其后再加两个特性适配低版本号ie
*display:inline;
*zoom:1;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>CSS + ul li 横向排序的两种方式 </title>
</head>
<body>
  <div id="nav">
  <ul>
    <li><a href="http://blog.csdn.net/superbirds" title="">superbirds</a></li>
    <li><a href="http://blog.csdn.net/superbirds" title="">superbirds</a></li>    
    <li><a href="http://blog.csdn.net/superbirds" title="">superbirds</a></li>
    <li><a href="http://blog.csdn.net/superbirds" title="">superbirds</a></li>
  </ul>
  </div>
</body>
</html>

CSS编码1:

* {
    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编码2:

* {
    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完成ul和li横向排序的两种方式的文章内容就详细介绍到这了,更多有关CSS完成ul和li横向排序內容请搜素脚本制作之家之前的文章内容或下面有关文章内容,期待大伙儿之后多多适用脚本制作之家!