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"& ...
随机推荐
- 剑指Offer面试题：34.翻转单词顺序VS左旋转字符串
一.题目一:翻转单词顺序 1.1 题目说明 题目一:输入一个英文句子,翻转句子中单词的顺序,但单词内字符的顺序不变.为简单起见,标点符号和普通字母一样处理.例如输入字符串"I am a st ...
- [转]GC简介
[转]GC简介 原文链接:http://www.cnblogs.com/cposture/p/4845189.html 原文写得太好了,这里转一下. 1 GC机制 1.1 对象 从计算机的角度,装有数 ...
- Windows Azure Storage (21) 使用AzCopy工具，加快Azure Storage传输速度
<Windows Azure Platform 系列文章目录> Update 2016-09-28 想要在Azure云端,使用AzCopy工具,从Azure China 上海数据中心存储账 ...
- C语言 · 删除数组0元素
从键盘读入n个整数放入数组中,编写函数CompactIntegers,删除数组中所有值为0的元素,其后元素向数组首端移动.注意,CompactIntegers函数需要接受数组及其元素个数作为参数,函数 ...
- Linux查找命令：grep,awk,sed
grep grep (global search regular expression(RE) and print out the line,全面搜索正则表达式并把行打印出来)是一种强大的文本搜索工具 ...
- 视图必须派生自 WebViewPage 或 WebViewPage<TModel>
后端汇总:http://www.cnblogs.com/dunitian/p/4523006.html#efmvc 后来发现原来吧web.config给删了 这就简单了,复制其他项目的web.conf ...
- KNN算法
1.算法讲解 KNN算法是一个最基本.最简单的有监督算法,基本思路就是给定一个样本,先通过距离计算,得到这个样本最近的topK个样本,然后根据这topK个样本的标签,投票决定给定样本的标签: 训练过程 ...
- 启动第一个 KVM 虚机 - 每天5分钟玩转 OpenStack（4）
本节演示如何使用 virt-manager 启动 KVM 虚机. 首先通过命令 virt-manager 启动图形界面 # virt-manager 点上面的图标创建虚机 给虚机命名为 kvm1,这里 ...
- Ruby之基本数据类型（三）
前言 上一节我们介绍了常量以及变量的用法,这一节我们开始来介绍Ruby中的一些基本类型. 数值类型(Fixnum.Bignum.Float) Ruby的数值类型包括整数和浮点数.整数包括Fixnum和 ...
- 如何用C#代码判断一个类的类型
var s = ""; s.GetType().IsClass; 来自为知笔记(Wiz)