CSS中的浮动问题
有关于我们经常做的导航问题。我们如果想用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中的浮动问题的更多相关文章
- CSS中的浮动和定位
在了解CSS中的浮动和定位之前有必要先了解清楚标准流和脱离标准流的特性 标准流的默认特性 1.分行.块级元素,并且能够dispay转换. 2.块级元素(block):默认独占一行,不能并列显示,能够设 ...
- css中的浮动以及清除浮动
对于css中的浮动问题,曾经有一段时间我是懵懵懂懂的感觉,对于float这个属性一直是似懂非懂的赶脚,对于这种让我们一直懵懵懂懂的知识点,我们就需要找个时间点,仔仔细细的去将它搞懂,从这个过程中我们也 ...
- 如何理解CSS中的浮动 :其实他就像乘坐扶梯一样
只要你用过自动扶梯,你就能很快的理解CSS中的浮动(Float). 你肯定遇到过这样的情况: 做好了,你想用CSS浮动来调整元素间的位置关系. 在写完代码之后,你发现浮动元素没出现在你设想 ...
- 【转】CSS中的浮动和清除浮动
以下转自<CSS中的浮动和清除浮动,梳理一下!> 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目 ...
- CSS学习系列4 -- 再说CSS中的浮动运用及clear:left/right实际用法
在 CSS学习系列2 -- CSS中的清除浮动 中,我们详细说了CSS中清除浮动的方法及使用 后来我自己在项目开发一个需要使用浮动的网页时,进行了实际运用,加上后来看到一篇好文章.所以就在这里再次写篇 ...
- css 中的浮动
css中 浮动的作用: 使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”. css中 浮动的特点: 1)改变元素类型,使元素支持宽高: 2)半脱离文档流: 3)文本环绕: 4)顶对齐 ...
- css3-9 css中的浮动怎么使用
css3-9 css中的浮动怎么使用 一.总结 一句话总结:用来做一般的行效果,比如说手机左右分布的头部导航栏.浮动的东西放到一个div中去,里面的内容根据需求左浮动或者右浮动,然后记得加上清除浮动. ...
- css中的浮动与三种清除浮动的方法
说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top ...
- CSS中清除浮动的两种方式
在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...
- 详细解读css中的浮动以及清除浮动的方法
对于前端初学者来说,css浮动部分的知识是一块比较难以理解的部分,下面我将把我学习过程中的心得分享给大家. 导读: 1.css块级元素讲解 2.css中浮动是如何产生的 3.出现浮动后,如何清除浮 ...
随机推荐
- WebApp 里Meta标签大全,webappmeta标签大全
1.先说说mate标签里的viewport: viewport即可视区域,对于桌面浏览器而言,viewport指的就是除去所有工具栏.状态栏.滚动条等等之后用于看网页的区域.对于传统WEB页面来说,9 ...
- github 离线版本下载
http://download.csdn.net/download/nevinblog/9031049
- Window7 驱动编程环境配置
1. 安装VS2010,WDK7.60(GRMWDK_EN_7600_1) 2. 新建VC 控制台项目(选择为空项目) 3. 新建项目配置“driver” ,点击下拉按钮-点击(配置管理器) 输 ...
- only for equality comparisons Hash Index Characteristics
http://dev.mysql.com/doc/refman/5.7/en/index-btree-hash.html Hash Index Characteristics Hash indexes ...
- 【No.5 Ionic】修改 应用名,icon,启动界面
修改 应用名 直接 修改 config.xml中的name 修改icon 和 启动界面 在resources目录有个 icon.png 和 splash.png 文件,直接把文件覆盖执行重新生成命令 ...
- Android百分比布局支持库介绍——com.android.support:percent(转)
转载自http://www.apkbus.com/forum.php?mod=viewthread&tid=244752&extra=&_dsign=0b699c42 在此之前 ...
- Ubuntu 14.04 升级gcc 4.8到gcc 5.x
简介 有些软件比较新,需要更高的gcc版本,所以需要升级gcc.编译安装比较耗时,所以直接选择bin包就好. 步骤 添加源 sudo add-apt-repository ppa:ubuntu-too ...
- NSMutableAttributedString可变属性字符串的用法
适用于:当你想对一个字符串中的某几个字符更改颜色,字体... NSString *string = @"今日营养配餐提供热量1800千卡,需要饮食之外额外补充钙10mg,铁20mg,锌9.5 ...
- sql 在not in 子查询有null值情况下经常出现的陷阱
如果下:TempSalesPriceFixedValues表和SalesPriceFixedValues表,要求查询出在TempSalesPriceFixedValues表中且不在SalesPrice ...
- csrf 跨站请求伪造
转自 http://www.cnblogs.com/hyddd/archive/2009/04/09/1432744.html