<!DOCTYPE html><html lang=＂en＂><head> <meta charset=＂UTF-8＂> <title></title> <style type=＂text/css＂> *{margin: 0; padding: 0;} ul, li{list-style: none;} ul:after{content: ''; display: block; clear: both;} li{width: 100px; height: 100px; background
去掉 #nav li中的float:left; 仍有疑问追问吧
在每个列表中加入float,最后清理一下浮动就可以了.<div> <ul style=＂float:left＂> <li></li> <li></li> <li></li> </ul> <ul style=＂float:left;margin-left:50px;margin-right:50px＂> <li></li> <li></li> <li></li> </ul> <ul style=＂float:left＂> <li></li> <li></li> <li></li> </ul></div><div style=＂clear:both＂></div>
用float:left,如果无序列表有外边距,即有maring值,则 float:left和display: inline同时用,不然浏览器兼容性会出问题,IE6外边距会加倍.单独使用display: inline虽然可以横向显示,但无序列表的宽度和高度值将不起作用了,即如果li设置值将不起作用,因为display: inline是行内样式.
<ul> <li style=＂float:left;＂>.</li> <li style=＂float:left;＂>.</li> <li style=＂float:left;＂>.</li> <li style=＂float:left;＂>.</li></ul>
1234567891011121314151617181920 <html><styletype='text/css'>#item li{ float:right; }</style><body><divid='item'><ul><li>星期七</li><li>星期六</li><li>星期五</li><li>星期四</li><li>星期三</li><li>星期二</li><li>星期一</li></ul></div></body></html>
只要加个float:left; 只要LI的宽度不超过 UL的宽度 就是横排了
<!--样式--> <style type=＂text/css＂> .nav li{ float:left; width:100px; list-style-type:none;} .nav li a{ color:#333;} .nav li a:hover{ color:#f00; text-decoration:underline; } </style> <!--html代码--> <ul class=＂nav＂> <li><a href=＂#＂>导航链接1</a></li> <li><a href=＂#＂>导航链接2</a></li> <li><a href=＂#＂>导航链接3</a></li> </ul>
运用浮动属性给每个li设置float:left;margin-left:30px;即可
分两步:1.设置ul的宽度为无限大 比如 width:9999px;2.设置ul下的li浮动.float:left;回答完毕.