如用css让ul横向排列,css如何实现ul和li横向排列

因为li是块级元素，默认占一行的，要想实现横向排列，一般通过以下两个方法：float:left

这样设置有一个问题，li浮动以后则脱离了文本流，即不占位置，如果它的父级元素有具体的样式且没有固定宽高，建议父元素清除浮动，或者设置固定宽高。display:inline-block

即把li变为行内元素且可以设置宽高以及边距，这样也有一个问题，低版本的Ie浏览器不兼容inline-block，建议在其后再加两个属性兼容低版本ie

(推荐教程：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视频教程