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>
效果是：
第二步：隐藏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标签上。
现在的效果是没有圆点了：
第三步：关键的浮动
这里是菜单变成横向的关键，我们给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
ul li设置横排，并除去li前的圆点的更多相关文章
- li设置inline-block后，li左边出现空隙问题。
方法1:在ul设置font-size=0,然后再li再单独设置font-size 方法2:li连着写不要换行,也可以解决. <ul> <li>测试1</li>< ...
- 给li设置float浮动属性之后，无法撑开外层ul的问题。
最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...
- 给li设置float浮动属性之后，无法撑开外层ul的问题。（原址：http://www.cnblogs.com/cielzhao/p/5781462.html）
最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...
- [Web前端] 给li设置float浮动属性之后，无法撑开外层ul的问题。
cp from : https://www.cnblogs.com/cielzhao/p/5781462.html 最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style ...
- ul,li设置inline-block缝隙
去掉换行符和空白符 margin-left: -0.5em(缝隙大小不确定) ul字号设为0,li设置字号 (有些浏览器设置最小字体) js移除空白子节点
- js：for循环ul/li，获取当前被点击元素的id，以及给其他li设置属性
js:for循环ul/li,获取当前被点击元素的id,以及给其他li设置属性 <!doctype html> <html> <head> <meta char ...
- html中让多个li标签横排显示
1.我们可以通过为ul标签下所有li标签设定样式“display:inline-block”的方式,让多个li标签横排显示 2.除了以上方法,我们还可以所有li标签使用float(浮动)的方式,让多个 ...
- jquery 在ul中取得第一级的li
在ul中取得第一级的li <div id='demo1'> <ul> <li id='1'>1<li> <li id='2'>2<li ...
- CCS设置第一个li的元素与其他li样式不同
<div class="ly-content-list"> <ul> <li> <div class="title"& ...
随机推荐
- .NET中那些所谓的新语法之一：自动属性、隐式类型、命名参数与自动初始化器
开篇:在日常的.NET开发学习中,我们往往会接触到一些较新的语法,它们相对以前的老语法相比,做了很多的改进,简化了很多繁杂的代码格式,也大大减少了我们这些菜鸟码农的代码量.但是,在开心欢乐之余,我们也 ...
- 日志系统实战(一)—AOP静态注入
背景 近期在写日志系统,需要在运行时在函数内注入日志记录,并附带函数信息,这时就想到用Aop注入的方式. AOP分动态注入和静态注入两种注入的方式. 动态注入方式 利用Remoting的Context ...
- WebApiThrottle限流框架使用手册
阅读目录: 介绍 基于IP全局限流 基于IP的端点限流 基于IP和客户端key的端点限流 IP和客户端key的白名单 IP和客户端key自定义限制频率 端点自定义限制频率 关于被拒请求的计数器 在we ...
- IE10，11下_doPostBack未定义错误的解决方法
出现的原因 .NET2.0和.NET4.0一起发布的浏览器定义文件中有一个错误,它们保存相当一部分浏览器版本的定义.但是浏览器的有些版本(比如IE10,11)则不再在这个范围之内.因此,ASP.NET ...
- 用java PreparedStatement就不用担心sql注入了吗？
先感慨下,好久没写博客了,一是工作太忙,二是身体不太给力,好在终于查清病因了,趁着今天闲下来,迫不及待与读者交流,最后忠告一句:身体是活着的本钱! 言归正传,对java有了解的同学基本上都体验过JDB ...
- windows命令——explorer
转至http://www.cnblogs.com/ymind/archive/2012/03/30/explorer-command-args.html 今天才知道,explorer原来可以这样用, ...
- defered,promise回顾
defered,promise回顾 http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_o ...
- 没有水果机的也来体验下Visual Studio for Mac
在去年微软已经宣布.NET将实现真正的跨平台,并且发布了Mac和Linux版的Visual Studio Code编辑器,但强大的Visual Studio确只有Windows版. 还坚守.NET开发 ...
- Myeclipse 安装SVN步骤
非在线安装 首先来这儿下载插件 http://subclipse.tigris.org/servlets/ProjectDocumentList?folderID=2240 找个最新的下载 解压到对应 ...
- 掌握 Cinder 的设计思想 - 每天5分钟玩转 OpenStack（46）
上一节介绍了 Cinder 的架构,这节讨论 Cinder 个组件如何协同工作及其设计思想. 从 volume 创建流程看 cinder-* 子服务如何协同工作 对于 Cinder 学习来说,Volu ...