css 恢复ulli_ulli设置横排，并除去li前的圆点_html/css_WEB-ITnose

效果预览：http://hovertree.com/texiao/css/

如何用CSS制作横向菜单 让ul li横向排列及圆点处理

我们先建立一个无序列表，来建立菜单的结构。代码是：

首页

网站地图

HoverTreeCMS

特效

CMS在线预览

jQuery图片列表鼠标经过遮罩显示文字

原文

效果是：

首页

网站地图

HoverTreeCMS

特效

CMS在线预览

jQuery图片列表鼠标经过遮罩显示文字

原文

第二步：隐藏li的默认样式，去掉圆点

因为看起来不是很好看，菜单通常都不需要li默认的圆点，我们给UL定义一个样式来消除这些圆点。

当然，为了更好的控制整个菜单，我们把菜单放在一个div里。页面代码变成：

首页

网站地图

HoverTreeCMS

特效

CMS在线预览

jQuery图片列表鼠标经过遮罩显示文字

原文

CSS定义为：

.hvtulli22 ul{list-style:none;}

说明：“.hvtulli22 ul”表示我要定义的样式将作用在hvtulli的层里的ul标签上。

现在的效果是没有圆点了：

首页

网站地图

HoverTreeCMS

特效

CMS在线预览

jQuery图片列表鼠标经过遮罩显示文字

原文

第三步：关键的浮动

这里是菜单变成横向的关键，我们给li元素加上一个“float:left;”属性，让每个li浮动在前面一个li的左面，margin-left:10px 使li之间间隔10像素。

CSS定义为：

.hvtulli li{float:left;margin-left:10px}

效果是：http://hovertree.com/texiao/css/

看，菜单变横向了。就这么简单！下面需要做的就是优化细节了。

HTML文件代码：

ul中li横排，除去li前的圆点，li之间间隔-何问起

何问起

ul中li横排，除去li前的圆点，li之间间隔

首页

网站地图

HoverTreeCMS

特效

CMS在线预览

jQuery图片列表鼠标经过遮罩显示文字

原文

js,jquery,css,html5特效

本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源：php中文网