ddng.net
当前位置:首页 >> 无序列表变横向列表 >>

无序列表变横向列表

<!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;回答完毕.

zxqs.net | ppcq.net | krfs.net | beabigtree.com | dzrs.net | 网站首页 | 网站地图
All rights reserved Powered by www.ddng.net
copyright ©right 2010-2021。
内容来自网络,如有侵犯请联系客服。zhit325@qq.com