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

第一步:建立一个无序列表

我们先建立一个无序列表,来建立菜单的结构。代码是:<ul>

<li><a href="1">首页</a></li>

<li><a href="2">产品介绍</a></li>

<li><a href="3">服务介绍</a></li>

<li><a href="4">技术支持</a></li>

<li><a href="5">立刻购买</a></li>

<li><a href="6">联系我们</a></li>

</ul>

效果是:

  • 首页
  • 产品介绍
  • 服务介绍
  • 技术支持
  • 立刻购买
  • 联系我们

第二步:隐藏li的默认样式,去掉圆点

因为看起来不是很好看,菜单通常都不需要li默认的圆点,我们给UL定义一个样式来消除这些圆点。

当然,为了更好的控制整个菜单,我们把菜单放在一个div里。页面代码变成:<div class="test"> <ul>

<li><a href="1">首页</a></li>

<li><a href="2">产品介绍</a></li>

<li><a href="3">服务介绍</a></li>

<li><a href="4">技术支持</a></li>

<li><a href="5">立刻购买</a></li>

<li><a href="6">联系我们</a></li>

</ul> </div>

CSS定义为:.test ul{list-style:none;}

说明:“.test ul”表示我要定义的样式将作用在test的层里的ul标签上。

现在的效果是没有圆点了:

首页

产品介绍

服务介绍

技术支持

立刻购买

联系我们

第三步:关键的浮动

这里是菜单变成横向的关键,我们给li元素加上一个“float:left;”属性,让每个li浮动在前面一个li的左面。

CSS定义为:.test li{float:left;}

效果是:

首页产品介绍服务介绍技术支持立刻购买联系我们

看,菜单变横向了。就这么简单!下面需要做的就是优化细节了

ul li横向排列及圆点处理的更多相关文章

  1. CSS + ul li 横向排列的两种方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. css ul li 横向排列

    因为li是块级元素,默认占一行的,要想实现横向排列,一般通过以下两个方法:float:left这样设置有一个问题,li浮动以后则脱离了文本流,即不占位置,如果它的父级元素有具体的样式且没有固定宽高,建 ...

  3. 菜单制作:ul li横向排列

    CSS菜单制作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  4. 无序列表li横向排列的间隙问题

    今天在写页面的时候,无意中遇到这样一个问题,就是无序列表li横向排列即做成导航栏时,列表项间有间隙. 如: 将列表项li变成列表块后(即将li标签设置为,display:inline-block后), ...

  5. 解决ul的li横向排列换行的问题

    1. 问题现象 先看下面的html结构: <div> <ul> <li><img src='./img/1.jpg'></li> <l ...

  6. 无序列表li横向排列

    一.横向两列方式排列: 在网页中,很多地方都会用到无序列表横向排列的形式,通常的写法都是使得li的css样式设置为:float:left的形式即可,li会依次从最左边开始并列对齐, 例如: HTML中 ...

  7. CSS中如何将li横向排列

    直接贴段例子代码吧: @{ Layout = null;} <!DOCTYPE html><style type="text/css"> .test li ...

  8. ul li设置横排,并除去li前的圆点

    效果预览:http://hovertree.com/texiao/css/ 如何用CSS制作横向菜单 让ul li横向排列及圆点处理 我们先建立一个无序列表,来建立菜单的结构.代码是: <ul& ...

  9. UL/LI

    如何用CSS制作横向菜单 让ul li横向排列及圆点处理    我们先建立一个无序列表,来建立菜单的结构.代码是: <ul><li><a href="1&quo ...

随机推荐

  1. Java的++自增

    记得大学刚开始学C语言时,老师就说:自增有两种形式,分别是i++和++i,i++表示的是先赋值后加1,++i是先加1后赋值,这样理解了很多年也没出现问题,直到遇到如下代码,我才怀疑我的理解是不是错了: ...

  2. jQuery基础DOM和CSS操作

    $('#box').html();//获取 html 内容$('#box').text();//获取文本内容,会自动清理 html 标签$('#box').html('<em>www.li ...

  3. php 简单操作数据库

    <?php header("content-type:text/html;charset=utf-8"); /*//造一个连接 $connect = @mysql_conne ...

  4. LBS优化方案探究

    方案1: 假设数据结构是这个样子的结构 那么找某个范围之内的用户,相当于: select * from tb_lbs_user where lat > lat_min and lat < ...

  5. 以app形式启动chrome——关于chrome命令行

    转自:http://wiselyman.iteye.com/blog/2179043 转自:http://bbs.ithome.com/thread-589651-1-1.html 转自:http:/ ...

  6. 从维度理解dp问题

    对于dp,我目前的理解就是,干成题目中的那件事需要作出若干次决策,然后你要取其中最优的结果,我们可以用深搜来递归地找最优解,然后我们来观察一下这个递归树的形状,如果它能从底往上直接递推的话,就不用递归 ...

  7. 解决 Agent admitted failure to sign using the key 问题 with ssh

    之前如果建立 ssh 连接,只要將公鑰複製到 ~/.ssh/authorized_keys 就可以利用金鑰登入而不需要建立密碼. 現在的 ssh 使用同樣的方法會出現錯誤訊息 Agent admitt ...

  8. Android 一个app启动另一个app

    最近,一个app启动另一个app,这个玩法挺火的嘛,有没有试过更新QQ到5.1版本,QQ的健康里面就可以添加其他app,实现从QQ跳转到其他app应用.这个挺好玩的,一下子带来了多少流量啊. 一.先来 ...

  9. git中进入带有空格的目录下的解决办法

    比如:要进入Program Files目录下 有两种方法: 1.将Program Files目录用引号引起来. $ cd "Program Files" 2.将空格处使用空格引号 ...

  10. oracle 11g安装(转)

    原文地址:http://www.2cto.com/database/201208/150620.html 一.Oracle 下载 注意Oracle分成两个文件,下载完后,将两个文件解压到同一目录下即可 ...