有关于我们经常做的导航问题。我们如果想用ul>li来做导航的话，我是一般是用到浮动这个属性的。

也就是 float:left; 或者是 display:inline-block; 

下边代码：

 <body>

         <ul>

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

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

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

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

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

             <li><a href="#">招聘</a></li>

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

         </ul>

 </body>
 <style>

 *{margin:0px;padding:0px;}

 ul{width:362px;height:41px;background:#ffb400;}

 li{ list-style:none; display:inline-block;line-height:41px;text-align:center;}

 a{font-size:14px;text-decoration:none;color:#000;display:block;width:51px;height:41px;}

 a:hover{color:#fff;background:#000;padding:0;}

 </style>

这里的display:inline-block可以等价于float:left;

　　

CSS中的浮动问题的更多相关文章

  1. CSS中的浮动和定位

    在了解CSS中的浮动和定位之前有必要先了解清楚标准流和脱离标准流的特性 标准流的默认特性 1.分行.块级元素,并且能够dispay转换. 2.块级元素(block):默认独占一行,不能并列显示,能够设 ...

  2. css中的浮动以及清除浮动

    对于css中的浮动问题,曾经有一段时间我是懵懵懂懂的感觉,对于float这个属性一直是似懂非懂的赶脚,对于这种让我们一直懵懵懂懂的知识点,我们就需要找个时间点,仔仔细细的去将它搞懂,从这个过程中我们也 ...

  3. 如何理解CSS中的浮动 ：其实他就像乘坐扶梯一样

    只要你用过自动扶梯,你就能很快的理解CSS中的浮动(Float). 你肯定遇到过这样的情况:       做好了,你想用CSS浮动来调整元素间的位置关系. 在写完代码之后,你发现浮动元素没出现在你设想 ...

  4. 【转】CSS中的浮动和清除浮动

    以下转自<CSS中的浮动和清除浮动,梳理一下!> 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目 ...

  5. CSS学习系列4 -- 再说CSS中的浮动运用及clear:left/right实际用法

    在 CSS学习系列2 -- CSS中的清除浮动 中,我们详细说了CSS中清除浮动的方法及使用 后来我自己在项目开发一个需要使用浮动的网页时,进行了实际运用,加上后来看到一篇好文章.所以就在这里再次写篇 ...

  6. css 中的浮动

    css中 浮动的作用: 使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”. css中 浮动的特点: 1)改变元素类型,使元素支持宽高: 2)半脱离文档流: 3)文本环绕: 4)顶对齐 ...

  7. css3-9 css中的浮动怎么使用

    css3-9 css中的浮动怎么使用 一.总结 一句话总结:用来做一般的行效果,比如说手机左右分布的头部导航栏.浮动的东西放到一个div中去,里面的内容根据需求左浮动或者右浮动,然后记得加上清除浮动. ...

  8. css中的浮动与三种清除浮动的方法

    说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top ...

  9. CSS中清除浮动的两种方式

    在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...

  10. 详细解读css中的浮动以及清除浮动的方法

    对于前端初学者来说,css浮动部分的知识是一块比较难以理解的部分,下面我将把我学习过程中的心得分享给大家. 导读:   1.css块级元素讲解 2.css中浮动是如何产生的 3.出现浮动后,如何清除浮 ...

随机推荐

  1. hdu Farm Irrigation

    这题第一感觉是用搜索做,暴力就可以解决,这里将水管转换成一个个3*3的矩阵,然后搜素就可以了.写完之后确实一遍过掉了,31ms.附上代码: #include"iostream" # ...

  2. 关于ASPCMS标签调用的一些总结

    菜单的应用 <ul class="nav navbar-nav"> {aspcms:navlist} {}<!--判断是否有下级目录--> <li c ...

  3. DOS运行命令

    运行命令主要是DOS操作系统的运行方式.DOS时代的时候,为了方便用户的操作,微软公司将一些常用的命令,如DIR,CD等命令全部集成在系统里面. 基本定义 对于DOS来说是一个很大的优点.而存放这些内 ...

  4. velocityjs 动画库 比jquery默认的animate强

    神坑记录: 1.transform: translate3d(80%,0,0); 无法作为参数,必须修改为这种:translateX: 0% 官方文档 http://velocityjs.org/ g ...

  5. # 20145334赵文豪 《Java程序设计》第7周学习总结

    20145334赵文豪 <Java程序设计>第7周学习总结 教材学习内容总结 第十三章 时间与日期 13.1.1时间的度量 1.格林威治时间(GMT):参考太阳到达最高点,有时间误差. 2 ...

  6. BizTalk开发系列(二十二) 开发自定义Map Functoid

    尽管 BizTalk Server 提供许多Functoid以支持一系列不同的操作,但仍可能会遇到需要其他方法的情况.<BizTalk开发系列 Map扩展开发>介绍了通过使用自定义 XSL ...

  7. 【iCore3 双核心板_FPGA】例程六：计数器实验——计数器使用

    实验指导书及代码包下载: http://pan.baidu.com/s/1kUiAAt5 iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...

  8. HDU 2222 Keywords Search（AC自动机模版题）

    Keywords Search Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others ...

  9. PHP 标准库 SPL 之数据结构栈（SplStack）简单实践

    PHP 5.3.0 版本及以上的堆栈描述可以使用标准库 SPL 中的 SplStack class,SplStack 类继承双链表 ( SplDoublyLinkedList ) 实现栈. 代码: & ...

  10. Cocos2dx集成于windows桌面窗口程序的步骤

    2D游戏需要做编辑器,而编辑器总是希望可以复用游戏中的逻辑来运行场景试看效果. 对于cocos2dx开发的程序,这个需求可以描述为: 实现一种方法,在桌面窗口程序中的某个控件上显示cocos2dx的场 ...