效果预览：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. 【nginx配置】nginx做非80端口转发

    一个场景 最近在使用PHP重写一个使用JAVA写的项目,因为需要查看之前的项目,所以要在本地搭建一个Tomcat来跑JAVA的项目.搭建成功后,因为Tomcat监听的端口是8080,因此,访问的URL ...

  2. 《App研发录》面世

    古者富贵而名灭,不可胜记,唯倜傥非常之人称焉.故西伯拘而演<周易>,屈原放逐,乃赋<离骚>.文人雅士一次次的谱写着千古绝唱,而我亦不能免俗,也要附庸风雅,写一部前不见古人.后不 ...

  3. Java动态编译

    程序产生过程 下图展示了从源代码到可运行程序的过程,正常情况下先编译(明文源码到字节码),后执行(JVM加载字节码,获得类模板,实例化,方法使用).本文来探索下当程序已经开始执行,但在.class甚至 ...

  4. iOS创建安全的单例

    创建安全的单例 #import "Singleton.h" @implementation Singleton static Singleton* _instance = nil; ...

  5. iOS-中app启动闪退的原因

    这种情况应和所谓的内存不足关系不大,很少有程序会在初始化时载入大量内容导致崩溃,并且这类问题也很容易在开发阶段被发现,所以内存不足造成秒退的可能性低(内存不足退,通常是程序用了一段时间,切换了几个画面 ...

  6. PHP面向对象笔记

    一.构造函数.析构函数(1)构造函数:__construct()说明:对象被实例化时调用,可带参数例: $obj = new A($a,$b); (2)析构函数:_destruct()说明:页面执行结 ...

  7. G2 2.0 更灵活、更强大、更完备的可视化引擎！

    概述 G2作为一款技术产品,自诞生以来,服务于广大的Web工程师群体和一部分数据分析师.一直来,G2 因其易用的语法和扎实的可视化理论基础,广受使用者好评.G2 1.x 的可视化能力已经非常强大,使用 ...

  8. Lookup component 用法

    Lookup component 类似于Tsql的join子句, select a.* ,b.* from dbo.tis a left join dbo. tdes b on a.code=b.co ...

  9. 深入学习jQuery选择器系列第三篇——过滤选择器之索引选择器

    × 目录 [1]通用形式 [2]首尾索引 [3]奇偶索引[4]范围索引 前面的话 上一篇介绍了过滤选择器中的子元素选择器部分,本文开始介绍极易与之混淆的索引选择器 通用形式 $(':eq(index) ...

  10. isPrototypeOf&&getPrototypeOf

    在JavaScript这个一切皆为对象的世界里,难免会判断原型链的问题.那么我们就有必要了解了解isPrototypeOf和getPrototypeOf这两个方法咯. 1.isPrototypeOf ...