效果预览：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前的圆点的更多相关文章

  1. li设置inline-block后，li左边出现空隙问题。

    方法1:在ul设置font-size=0,然后再li再单独设置font-size 方法2:li连着写不要换行,也可以解决. <ul> <li>测试1</li>< ...

  2. 给li设置float浮动属性之后，无法撑开外层ul的问题。

    最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...

  3. 给li设置float浮动属性之后，无法撑开外层ul的问题。（原址：http://www.cnblogs.com/cielzhao/p/5781462.html）

    最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...

  4. [Web前端] 给li设置float浮动属性之后，无法撑开外层ul的问题。

    cp from : https://www.cnblogs.com/cielzhao/p/5781462.html 最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style ...

  5. ul,li设置inline-block缝隙

    去掉换行符和空白符 margin-left: -0.5em(缝隙大小不确定) ul字号设为0,li设置字号 (有些浏览器设置最小字体) js移除空白子节点

  6. js：for循环ul/li，获取当前被点击元素的id，以及给其他li设置属性

    js:for循环ul/li,获取当前被点击元素的id,以及给其他li设置属性 <!doctype html> <html> <head> <meta char ...

  7. html中让多个li标签横排显示

    1.我们可以通过为ul标签下所有li标签设定样式“display:inline-block”的方式,让多个li标签横排显示 2.除了以上方法,我们还可以所有li标签使用float(浮动)的方式,让多个 ...

  8. jquery 在ul中取得第一级的li

    在ul中取得第一级的li <div id='demo1'> <ul> <li id='1'>1<li> <li id='2'>2<li ...

  9. CCS设置第一个li的元素与其他li样式不同

    <div class="ly-content-list"> <ul> <li> <div class="title"& ...

随机推荐

  1. 【译】PHP的变量实现（给PHP开发者的PHP源码-第三部分）

    文章来自:http://www.aintnot.com/2016/02/12/phps-source-code-for-php-developers-part3-variables-ch 原文:htt ...

  2. 由乱序播放说开了去-数组的打乱算法Fisher–Yates Shuffle

    之前用HTML5的Audio API写了个音乐频谱效果,再之后又加了个播放列表就成了个简单的播放器,其中弄了个功能是'Shuffle'也就是一般播放器都有的列表打乱功能,或者理解为随机播放. 但我觉得 ...

  3. 控制Linux下 mono 服务的启动停止

    当Window下的服务部署到Linux的时候,我们一般用Mono.service 来启动停止.参数比较多,不太好用.于是有个这个Shell脚本. 用法:moa s1 start #启动         ...

  4. [备忘]检索 COM 类工厂中 CLSID 为 {91493441-5A91-11CF-8700-00AA0060263B} 的组件时失败解决方法

    检索 COM 类工厂中 CLSID 为 {91493441-5A91-11CF-8700-00AA0060263B} 的组件时失败,原因是出现以下错误: 80070005 在CSDN上总是有网友问这个 ...

  5. JavaScript利用replace更改所有符合条件字符

    利用replace替换字符串时,在正常使用情况下默认只能更改匹配到的第一个字符 var a=new String("fffffddd"); console.log(a.replac ...

  6. Linux查找命令：grep,awk,sed

    grep grep (global search regular expression(RE) and print out the line,全面搜索正则表达式并把行打印出来)是一种强大的文本搜索工具 ...

  7. CentOS On VirtualBox

    背景 后台开发需要随时与服务器交互,本人使用Mac开发.但是不愿意在Mac上直接安装redis以及mysql等等工具.所以选择在VirtualenvBox下安装一个服务器系统,并且使用ssh与其连接. ...

  8. IDEA设置代码大小以及菜单栏大小

    IntelliJ IDEA设置菜单栏大小的方法:File --Settings --Appearance & Behavior -- Appearance ,右边Override defaul ...

  9. python定时重跑获取数据

    做大数据的童鞋经常会写定时任务跑数据,由于任务之间的依赖(一般都是下游依赖上游的数据产出),所以经常会导致数据获取失败,因为很多人发现数据失败后 都会去查看日志,然后手动去执行自己的任务.下面我实现了 ...

  10. Vue.js实现checkbox的全选和反选

    小颖之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项,再点全选结果就是反的了.很感谢博客园的朋友帮我改了这个问题嘻嘻,下面一起来看看具体是怎么实现的吧. 1.html <te ...