您现在的位置是：网站首页> 编程资料编程资料

CSS实现ul和li横向排列的两种方法HTMl中标签中li横向排列的实现示例css实现图片横向排列滚动效果让几个横向排列的浮动子div居中显示的方法让横向排列的几个浮动(float:left)的子div居中显示CSS的ul和li实现横向排列和去掉li的点

2023-10-18 287人已围观

简介这篇文章主要介绍了CSS实现ul和li横向排列的两种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

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

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

display:inline-block

即把li变为行内元素且可以设置宽高以及边距，这样也有一个问题，低版本的Ie浏览器不兼容inline-block，建议在其后再加两个属性兼容低版本ie
*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实现ul和li横向排列的两种方法的文章就介绍到这了,更多相关CSS实现ul和li横向排列内容请搜素以前的文章或下面相关文章，希望大家以后多多支持！

上一篇：CSS 实现侧滑显示留言面板的网页组件功能ai怎么使用CSS属性面板?Dreamweaver中CSS面板该怎么设置?纯css3制作网站后台管理面板

下一篇：移动端自适应样式之@media的使用方法CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题

您现在的位置是：网站首页> 编程资料编程资料

CSS实现ul和li横向排列的两种方法HTMl中标签中li横向排列的实现示例css实现图片横向排列滚动效果让几个横向排列的浮动子div居中显示的方法让横向排列的几个浮动(float:left)的子div居中显示CSS的ul和li实现横向排列和去掉li的点

相关内容

点击排行

本栏推荐

猜你喜欢