ul li设置横排，并除去li前的圆点

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

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

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

<ul>
<li><a href="http://hovertree.com/">首页</a></li>
<li><a href="http://hovertree.com/map/">网站地图</a></li>
<li><a href="http://hovertree.com/menu/hovertreecms/">HoverTreeCMS</a></li>
<li><a href="http://hovertree.com/menu/texiao/">特效</a></li>
<li><a href="http://cms.hovertree.com/">CMS在线预览</a></li>
<li><a href="http://hovertree.com/hvtart/bjae/74cc61ed089a2991.htm">jQuery图片列表鼠标经过遮罩显示文字</a></li>
<li><a href="http://hovertree.com/hvtart/bjae/rtmloulp.htm">原文</a></li>
</ul>

效果是：

首页
网站地图
HoverTreeCMS
特效
CMS在线预览
jQuery图片列表鼠标经过遮罩显示文字
原文

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

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

<style>.hvtulli22 ul{list-style:none;}</style>
<div class="hvtulli22"> <ul>
<li><a href="http://hovertree.com/">首页</a></li>
<li><a href="http://hovertree.com/map/">网站地图</a></li>
<li><a href="http://hovertree.com/menu/hovertreecms/">HoverTreeCMS</a></li>
<li><a href="http://hovertree.com/menu/texiao/">特效</a></li>
<li><a href="http://cms.hovertree.com/">CMS在线预览</a></li>
<li><a href="http://hovertree.com/hvtart/bjae/74cc61ed089a2991.htm">jQuery图片列表鼠标经过遮罩显示文字</a></li>
<li><a href="http://hovertree.com/hvtart/bjae/rtmloulp.htm">原文</a></li>
</ul></div>

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文件代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>ul中li横排，除去li前的圆点，li之间间隔-何问起</title><base target="_blank" />
<meta charset="utf-8" />
<style>.hvtulli ul{list-style:none;} .hvtulli li{float:left;margin-left:10px}</style>
</head>
<body>
<div><h2>何问起</h2>
<h3>ul中li横排，除去li前的圆点，li之间间隔</h3>
</div>
<div class="hvtulli">
<ul>
<li><a href="http://hovertree.com/">首页</a></li>
<li><a href="http://hovertree.com/map/">网站地图</a></li>
<li><a href="http://hovertree.com/menu/hovertreecms/">HoverTreeCMS</a></li>
<li><a href="http://hovertree.com/menu/texiao/">特效</a></li>
<li><a href="http://cms.hovertree.com/">CMS在线预览</a></li>
<li><a href="http://hovertree.com/hvtart/bjae/74cc61ed089a2991.htm">jQuery图片列表鼠标经过遮罩显示文字</a></li>
<li><a href="http://hovertree.com/hvtart/bjae/rtmloulp.htm">原文</a></li>
</ul>
</div>
</body>
</html>

js,jquery,css,html5特效 http://www.cnblogs.com/roucheng/p/texiao.html

转载于:https://www.cnblogs.com/roucheng/p/ulli.html

ul li设置横排，并除去li前的圆点相关推荐

html 为什么ul不撑开,给li设置float浮动属性之后，无法撑开外层ul的问题。
以下面代码为例,其实有好几种解决方法,我用的这种并不是最简单的. 给li设置float浮动属性之后,无法撑开外层ul的问题. ul{ border: 1px solid #000; width: 20 ...
php给点击的li设置样式,两种方法为LI列表前3行设置样式
两种方法为LI列表前3行设置样式蓝叶网站设计 2014-06-18 9789 10评论在设计网页模板的时候,为了突出信息的重要性以及美观度,我们会设置一些样式使LI文章列 ...
列表标签ul、ol、dl、li
列表标签的种类无序列表标签(ul标签) 有序列表标签(ol标签) 自定义列表标签(dl标签) 无序列表无序列表的各个列表项之间没有顺序级别之分,是并列的.其基本语法格式如下: <!-- ul ...
设置了li(float:right),里面的li反过来显示 - 解决办法
设置了li(float:right),里面的li反过来显示 - 解决办法可以让ul float:right ul里的li 依然float:left 本文转自许琴 51CTO博客,原文链接:http: ...
html修改li大小,css为li设置不同宽度
在开发过程中,会碰到一些选择器的需求:例如使列表中的第一项或者最后一项显示不同的样式 .列表中的奇数或者偶数项显示不同的背景色 . . . 等等.我们可以通过 CSS 来实现这样的效果,CSS 给我们 ...
HTML+CSS修改li前小圆点的样式or颜色
HTML+CSS修改li前小圆点的样式or颜色修改样式有参考样式的图片情况: 将原有的小圆点删除后再添加修改颜色代码修改样式有两种方法比较方便的方法有参考样式的图片情况: 可以使用图像处 ...
如何将li标签前的圆点改为方形及改变大小颜色
如何改变li标签前的圆点改为方形--改变其大小,颜色正常写一个无序列表运行结果: 一:将圆点改为方形在body上方写<style></style>标签,将下面的代码写进标 ...
当li设置为inline-block之后元素之间空隙的产生原因和解决办法
当我们在使用ul>li标签写导航的时候,又不想让其变成浮动流,我们只需要把li的css样式添加一个display: inline-block就可以了. 但是当我们写完样式之后,本来应该是这样的. ...
jquery生成一个li_JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
本文实例讲述了JQuery实现ul中添加LI和删除指定的Li元素功能.分享给大家供大家参考,具体如下: 最近为了实现这个简单的功能也是看了很多的内容,终于找出了看起来简单易实现的方法,我觉得能用最简洁 ...

ul li设置横排，并除去li前的圆点

ul li设置横排，并除去li前的圆点相关推荐

最新文章

热门文章