CSS中li标签横向排列的方法
发布时间:2023-12-27 09:40:25 所属栏目:语言 来源:DaWei
导读: 在CSS中我们常常会使用到li标签,因为li标签用途很广泛,它可以用来制作列表,选项卡,导航等等。但是li是块级元素,我们想要实现横向排列,究竟该怎样做呢?下文给大家分享了两种方法,有需
在CSS中我们常常会使用到li标签,因为li标签用途很广泛,它可以用来制作列表,选项卡,导航等等。但是li是块级元素,我们想要实现横向排列,究竟该怎样做呢?下文给大家分享了两种方法,有需要的朋友可以参考,那么接下就跟小编来学习一下吧。 float:left 这样设置有一个问题,li浮动以后则脱离了文本流,即不占位置,如果它的父级元素有具体的样式且没有固定宽高,建议父元素清除浮动,或者设置固定宽高 display:inline-block 即把li变为行内元素且可以设置宽高以及边距,这样也有一个问题,低版本的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代码一: * { 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中li标签实现横向排列的方法的介绍,上述示例具有一定的借鉴价值,有需要的朋友可以参考学习,希望对大家学习li标签的使用有帮助。 (编辑:温州站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
推荐文章
站长推荐