效果预览：http://hovertree.com/texiao/css/

如何用CSS制作横向菜单 让ul li横向排列及圆点处理

我们先建立一个无序列表，来建立菜单的结构。代码是：

  1. <ul>
  2. <li><a href="http://hovertree.com/">首页</a></li>
  3. <li><a href="http://hovertree.com/map/">网站地图</a></li>
  4. <li><a href="http://hovertree.com/menu/hovertreecms/">HoverTreeCMS</a></li>
  5. <li><a href="http://hovertree.com/menu/texiao/">特效</a></li>
  6. <li><a href="http://cms.hovertree.com/">CMS在线预览</a></li>
  7. <li><a href="http://hovertree.com/hvtart/bjae/74cc61ed089a2991.htm">jQuery图片列表鼠标经过遮罩显示文字</a></li>
  8. <li><a href="http://hovertree.com/hvtart/bjae/rtmloulp.htm">原文</a></li>
  9. </ul>

效果是：

第二步：隐藏li的默认样式，去掉圆点
因为看起来不是很好看，菜单通常都不需要li默认的圆点，我们给UL定义一个样式来消除这些圆点。

当然，为了更好的控制整个菜单，我们把菜单放在一个div里。页面代码变成：

  1. <style>.hvtulli22 ul{list-style:none;}</style>
  2. <div class="hvtulli22"> <ul>
  3. <li><a href="http://hovertree.com/">首页</a></li>
  4. <li><a href="http://hovertree.com/map/">网站地图</a></li>
  5. <li><a href="http://hovertree.com/menu/hovertreecms/">HoverTreeCMS</a></li>
  6. <li><a href="http://hovertree.com/menu/texiao/">特效</a></li>
  7. <li><a href="http://cms.hovertree.com/">CMS在线预览</a></li>
  8. <li><a href="http://hovertree.com/hvtart/bjae/74cc61ed089a2991.htm">jQuery图片列表鼠标经过遮罩显示文字</a></li>
  9. <li><a href="http://hovertree.com/hvtart/bjae/rtmloulp.htm">原文</a></li>
  10. </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文件代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5. <title>ul中li横排，除去li前的圆点，li之间间隔-何问起</title><base target="_blank" />
  6. <meta charset="utf-8" />
  7. <style>.hvtulli ul{list-style:none;} .hvtulli li{float:left;margin-left:10px}</style>
  8. </head>
  9. <body>
  10. <div><h2>何问起</h2>
  11. <h3>ul中li横排，除去li前的圆点，li之间间隔</h3>
  12. </div>
  13. <div class="hvtulli">
  14. <ul>
  15. <li><a href="http://hovertree.com/">首页</a></li>
  16. <li><a href="http://hovertree.com/map/">网站地图</a></li>
  17. <li><a href="http://hovertree.com/menu/hovertreecms/">HoverTreeCMS</a></li>
  18. <li><a href="http://hovertree.com/menu/texiao/">特效</a></li>
  19. <li><a href="http://cms.hovertree.com/">CMS在线预览</a></li>
  20. <li><a href="http://hovertree.com/hvtart/bjae/74cc61ed089a2991.htm">jQuery图片列表鼠标经过遮罩显示文字</a></li>
  21. <li><a href="http://hovertree.com/hvtart/bjae/rtmloulp.htm">原文</a></li>
  22. </ul>
  23. </div>
  24. </body>
  25. </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. android内部培训视频_第一节

    声明:本视频为公司内部做android培训时录制的,无任何商业目的.同时鉴于水平有限,可能不符合您的需求,放在这里的目的是提供给公司同事下载,作为培训的一个记录,也作为一个系列教程的自我督促完成的理由 ...

  2. Module Zero概览

    返回<Module Zero学习目录> 介绍 ABP框架的设计是独立于任何数据库模式的且尽可能地使用泛型.因此,它避开了一些要求数据存储的抽象和可选的概念(如审计日志,session管理和 ...

  3. 移动APP服务端设计开发注意要点

    2014年,移动APP的热度丝毫没有减退,怎么为您的移动端app设计良好的服务器端接口(API)呢? 下面谈谈我个人的一些想法. 2014年,移动APP的热度丝毫没有减退,并没有像桌面软件被WEB网站 ...

  4. solve the problem of 'java web project cannot display verification code'

    my java code of the function: package com.util; import java.awt.Color; import java.awt.Font; import ...

  5. 单独使用jdbc编程问题总结（一）

    在学习Mybatis之前,我们先来回顾JDBC编程的相关知识.在此基础上深入的学习Mybatis框架.如有错误,敬请指正. (一)首先我们既然要使用jdbc,当然是要操作数据库了.创建一个名为:myb ...

  6. MySql.Data.MySqlClient.MySqlException: Parameter ‘@maxid’ must be defined

    本文涉及到的mysql知识点: mysql中的if条件语句用法: IF(expr1,expr2,expr3) mysql使用变量(mysql中变量不用事前申明) mysql事务 testcase 为了 ...

  7. GitHub的使用记录

    前言: 该贴为笔者在使用GItHub中的一些使用注意,及Git的基本命令,会一直记录笔者在使用GitHub中可能产生的错误及解决方法(会一直更新中),待一些Git初使用者参考,如果有说明不详细或不对的 ...

  8. iOS-----Crash文件分析(一)

    开发程序的过程中不管我们已经如何小心,总是会在不经意间遇到程序闪退.脑补一下当你在一群人面前自信的拿着你的App做功能预演的时候,流畅的操作被无情地Crash打断.联想起老罗在发布Smartisan ...

  9. IOS系列swift语言之课时二

    今天我们要讲的就是函数[对于函数,在最后面还有几道题,喜欢的博友可以看了自己做一下,和我交流一下] 当然这与我们的c语言还是有一定的共同之处的,对于有一些c语言或者是java基础的童鞋,我觉得是很容易 ...

  10. C#中日期记忆日期的格式化，日期格式化说明

    参数format格式详细用法:格式字符 关联属性/说明 d ShortDatePattern D LongDatePattern f 完整日期和时间(长日期和短时间) F FullDateTimePa ...