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"& ...
随机推荐
- [nRF51822] 14、浅谈蓝牙低功耗(BLE)的几种常见的应用场景及架构（科普类干货）
蓝牙在短距离无线通信领域占据举足轻重的地位—— 从手机.平板.PC到车载设备, 到耳机.游戏手柄.音响.电视, 再到手环.电子秤.智能医疗器械(血糖仪.数字血压计.血气计.数字脉搏/心率监视器.数字体 ...
- 浅析MSIL中间语言——基础篇
一.开篇 研究MSIL纯属于个人喜好,说在前面MSIL应用于开发的地方很少,但是很大程度上能够帮着我们理解底层的原理,这是我了解MSIL的主要原因.托管代码表示应用程序的方法的功能,它们以微软的中间语 ...
- ASP.NET MVC 5 - 视图
在本节中,你要去修改HelloWorldController类,使用视图模板文件,在干净利索地封装的过程中:客户端浏览器生成HTML. 您将创建一个视图模板文件,其中使用了ASP.NET MVC 3所 ...
- Azure SQL Database (19) Stretch Database 概览
<Windows Azure Platform 系列文章目录> Azure SQL Database (19) Stretch Database 概览 Azure SQL Da ...
- Hadoop学习笔记——搭建
一搭建环境列表 操作系统:centos6.5 64位 JDK环境:jdk1.7.0_71 hadoop版本:社区版本2.7.2,hadoop-2.7.2-src.tar.gz 主机名 ip 角色 用户 ...
- Viewport---响应式 Web 设计----在路上（13）
什么是 Viewport? viewport 是用户网页的可视区域. viewport 翻译为中文可以叫做"视区". 手机浏览器是把页面放在一个虚拟的"窗口"( ...
- jquery颜色选择器
本站下载 第二种:纯JAVASCRIPT: <html> <head> <meta http-equiv="Content-Type" content ...
- PHP SESSION机制,从存储到读取
PHP中,如果要获取SESSION数据,必须要有对应的session_id,session_id的获取方式有两种 1.基于客户端的cookie 2.基于url 先说第一种情况,基于客户端的cookie ...
- C#实现二维码功能，winform 以及 asp.net均可以用
二维码现在用途很多,怎么用C#编程生成呢? 准备 ThoughtWorks.QRCode.dll 需要 一个类 QRCode,这个类专门来生成二维码的 using System; using Syst ...
- 深入浏览器兼容 细数jQuery Hooks 属性篇
关于钩子:http://www.cnblogs.com/aaronjs/p/3387906.html 本章的目的很简单,通过钩子函数更细节的了解浏览器差异与处理方案, 版本是2.0.3所以不兼容ie6 ...