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

在每个列表中加入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>

运用浮动属性给每个li设置float:left;margin-left:30px;即可

这个就需要用到CSS技术的浮动,才能实现.

只要加个float:left; 只要LI的宽度不超过 UL的宽度 就是横排了

去掉 #nav li中的float:left; 仍有疑问追问吧

用float:left,如果无序列表有外边距,即有maring值,则 float:left和display: inline同时用,不然浏览器兼容性会出问题,IE6外边距会加倍.单独使用display: inline虽然可以横向显示,但无序列表的宽度和高度值将不起作用了,即如果li设置值将不起作用,因为display: inline是行内样式.

xhtml代码首先定义了一个容器div id="nav".这个容器用来放置这个无序列表横向导航菜单的内容,但也有人认为这个容器是多余的,直接定义ul id="nav"就可以了.我们不建议你这样做,要知道我们的站点是可扩展的,我们要为将来的扩

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>

<ul> <li style="float:left;">.</li> <li style="float:left;">.</li> <li style="float:left;">.</li> <li style="float:left;">.</li></ul>

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