MauerSu
- 浏览: 513798 次
- 性别:
- 来自: 北京
-
文章分类
- 全部博客 (563)
- 工作经验 (12)
- 数据库 (13)
- Servlet (10)
- Struts2 (1)
- Spring (25)
- Eclipse (5)
- Hibernate (5)
- Eclips (8)
- HTTP (7)
- J2EE (21)
- EHcache (1)
- HTML (11)
- 工具插件使用 (20)
- JPA (2)
- 杂谈 (17)
- 数据结构与算法 (3)
- Cloud Foundry (1)
- 安全 (10)
- J2SE (57)
- SQL (9)
- DB2 (6)
- 操作系统 (2)
- 设计模式 (1)
- 版本代码管理工具 (13)
- 面试 (10)
- 代码规范 (3)
- Tomcat (12)
- Ajax (5)
- 异常总结 (11)
- REST (2)
- 云 (2)
- RMI (3)
- SOA (1)
- Oracle (12)
- Javascript (20)
- jquery (7)
- JSP自定义标签 (2)
- 电脑知识 (5)
- 浏览器 (3)
- 正则表达式 (3)
- 建站解决问题 (38)
- 数据库设计 (3)
- git (16)
- log4j (1)
- 每天100行代码 (1)
- socket (0)
- java设计模式 耿祥义著 (0)
- Maven (14)
- ibatis (7)
- bug整理 (2)
- 邮件服务器 (8)
- Linux (32)
- TCP/IP协议 (5)
- java多线程并发 (7)
- IO (1)
- 网页小工具 (2)
- Flash (2)
- 爬虫 (1)
- CSS (6)
- JSON (1)
- 触发器 (1)
- java并发 (12)
- ajaxfileupload (1)
- js验证 (1)
- discuz (2)
- Mysql (14)
- jvm (2)
- MyBatis (10)
- POI (1)
- 金融 (1)
- VMWare (0)
- Redis (4)
- 性能测试 (2)
- PostgreSQL (1)
- 分布式 (2)
- Easy UI (1)
- C (1)
- 加密 (6)
- Node.js (1)
- 事务 (2)
- zookeeper (3)
- Spring MVC (2)
- 动态代理 (3)
- 日志 (2)
- 微信公众号 (2)
- IDEA (1)
- 保存他人遇到的问题 (1)
- webservice (11)
- memcached (3)
- nginx (6)
- 抓包 (1)
- java规范 (1)
- dubbo (3)
- xwiki (1)
- quartz (2)
- 数字证书 (1)
- spi (1)
- 学习编程 (6)
- dom4j (1)
- 计算机系统知识 (2)
- JAVA系统知识 (1)
- rpcf (1)
- 单元测试 (2)
- php (1)
- 内存泄漏cpu100%outofmemery (5)
- zero_copy (2)
- mac (3)
- hive (3)
- 分享资料整理 (0)
- 计算机网络 (1)
- 编写操作系统 (1)
- springboot (1)
最新评论
-
masuweng：
亦论一次OutOfMemoryError的定位与解错 -
变脸小伙：
引用[color=red][/color]百度推广中运用的技术 ...
Spring 3 mvc中返回pdf,json,xml等不同的view -
Vanillva：
不同之处是什么？？
Mybatis中的like查询 -
thrillerzw：
转了。做个有理想的程序员
有理想的程序员必须知道的15件事 -
liujunhui1988：
觉得很有概括力
15 个必须知道的 Java 面试问题（2年工作经验）
源：http://blog.micxp.com/index.php/archives/61/
评：
在网页制作中经常会用到浮动。用了浮动就会涉及到一个清除浮动的问题，因为包含浮动的元素是不会自动适应高度的，也就是不会被浮动元素撑开。
先看一个例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MicXP系统爱好者</title>
<style>
ul {
margin:0;
padding:10px;
list-style:none;
background-color:#006699;
}
ul li {
width:100px;
height:100px;
float:left;
margin-right:10px;
background-color:#99cc00;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
</ul>
</body>
</html>
可以看到，外面 ul 即蓝色的区域高度为0，如果没有设置 padding，这个 ul 是看不到的。当然要让它伸长也很简单，只需要在最后一个 li 后面加一个标签清楚下浮动就可以了。不过这样的话就改变了HTML结构，不好。现在这里要讨论的就是如何在不改变结构的情况下让 ul 自动伸长。
注意：自动伸长针对的是包含浮动元素的元素（这里是 ul）。而不是浮动元素自身（li）。
第一种方法：
IE 支持一个 CSS 属性 zoom， 这个元素接受一个数字或一个百分数，表示这个元素放大（缩小）的比例。例如：zoom:0.5或zoom:50% 表示缩小一半，而zoom:2或zoom:200%则表示放大一倍。
当定义了这个属性之后在 IE 浏览器里面就会自动适应高度了。当应用了这个属性之后，IE 就会自动伸长了。一般情况下我们不需要放大或缩小，所以定义 zoom:1 就行了。现在的 CSS：
ul {
margin:0;
padding:10px;
list-style:none;
background-color:#006699;
zoom:1; /* IE */
}
而非 IE 浏览器不支持这个属性。所以第一种方法需把浏览器分为两个阵营：IE 和 非IE。
对于非 IE 浏览器需要用到一个伪类 ：after （IE 浏览器不支持）。CSS 代码如下：
ul:after {
content:".";
display:block;
clear:both;
height:0;
}
：after 伪类用于向元素后面插入一段内容，即 content 属性。然后在这个插入的内容里清除浮动，我们可以想象成在最后一个 《li》 后面插入了一个 《span》。《/span》里面的内容是一个"."，然后设置display:block; clear:both; height:0; 等属性 （这个比喻不一定准确）。
我们看下在 Firefox 下面的效果：
可以看到 ul 已经自动伸长了，但下面有个小小的黑点。相信你已经猜到了，这个黑点对应的就是 content："." 。
这个黑点肯定是要去掉的啦，我们可以用 font-size:0;line-height:0; 将其去掉。
好了，现在在两个阵营的浏览器里都实现目标了。以下是 ul 所有的CSS代码：
ul {
margin:0;
padding:10px;
list-style:none;
background-color:#006699;
zoom:1;/* IE */
}
ul:after {
content:".";
display:block;
clear:both;
height:0;
font-size:0;
line-height:0;
}
第二种方法
我刚说过不止一种方法可以解决，那现在就来说说第二种方法。第二种方法还要更简单一些。同样，需要将浏览器分成两个阵营。不过和上一个有所不同，这 一次 IE7 站到了另外一个阵营。即 IE7， Firefox， Opera， Safari 等（这里暂时称为A浏览器）。对于这些浏览器，只要定义一个 overflow:auto; 即可，但是对于 IE6 和 IE5 （称为B浏览器）却不起作用。不过要 IE6，IE5 听话也很简单。只要定义一个高度即可，哪怕是 0 ，也会自动伸长。知道这些还没用，我们还得区分这两个阵营的浏览器才行。怎么区分呢？
A 浏览器支持属性选择符，而B浏览器不支持。
所以以下代码只有A浏览器才会执行。
[xmlns] ul { /* html[xmlns] ul 的简写 */
overflow:auto;
}
需要注意的是HTML 必须要有《 ！DOCTYPE 》头部以及《html》有xmlns属性才会起作用。不过这个问题似乎不大，现在绝大部分网页都有这两个东东，包括 Dreamweaver 默认新建的网页都会自动加上。
而对于B浏览器则可以通过以下方式：
* html ul {
height:1%;
}
其实 height 完全可以写成 0，为什么要写1%呢？告诉你其实我也不知道，大家都这么写。
好了，第二种方法的 ul 全部样式代码如下：
ul {
margin:0;
padding:10px;
list-style:none;
background-color:#006699;
}
[xmlns] ul { /*html[xmlns] ul 的简写*/
overflow:auto;
}
* html ul {
height:1%;
}
标签: 自适应高度
评：
在网页制作中经常会用到浮动。用了浮动就会涉及到一个清除浮动的问题，因为包含浮动的元素是不会自动适应高度的，也就是不会被浮动元素撑开。
先看一个例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MicXP系统爱好者</title>
<style>
ul {
margin:0;
padding:10px;
list-style:none;
background-color:#006699;
}
ul li {
width:100px;
height:100px;
float:left;
margin-right:10px;
background-color:#99cc00;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
</ul>
</body>
</html>
可以看到，外面 ul 即蓝色的区域高度为0，如果没有设置 padding，这个 ul 是看不到的。当然要让它伸长也很简单，只需要在最后一个 li 后面加一个标签清楚下浮动就可以了。不过这样的话就改变了HTML结构，不好。现在这里要讨论的就是如何在不改变结构的情况下让 ul 自动伸长。
注意：自动伸长针对的是包含浮动元素的元素（这里是 ul）。而不是浮动元素自身（li）。
第一种方法：
IE 支持一个 CSS 属性 zoom， 这个元素接受一个数字或一个百分数，表示这个元素放大（缩小）的比例。例如：zoom:0.5或zoom:50% 表示缩小一半，而zoom:2或zoom:200%则表示放大一倍。
当定义了这个属性之后在 IE 浏览器里面就会自动适应高度了。当应用了这个属性之后，IE 就会自动伸长了。一般情况下我们不需要放大或缩小，所以定义 zoom:1 就行了。现在的 CSS：
ul {
margin:0;
padding:10px;
list-style:none;
background-color:#006699;
zoom:1; /* IE */
}
而非 IE 浏览器不支持这个属性。所以第一种方法需把浏览器分为两个阵营：IE 和 非IE。
对于非 IE 浏览器需要用到一个伪类 ：after （IE 浏览器不支持）。CSS 代码如下：
ul:after {
content:".";
display:block;
clear:both;
height:0;
}
：after 伪类用于向元素后面插入一段内容，即 content 属性。然后在这个插入的内容里清除浮动，我们可以想象成在最后一个 《li》 后面插入了一个 《span》。《/span》里面的内容是一个"."，然后设置display:block; clear:both; height:0; 等属性 （这个比喻不一定准确）。
我们看下在 Firefox 下面的效果：
可以看到 ul 已经自动伸长了，但下面有个小小的黑点。相信你已经猜到了，这个黑点对应的就是 content："." 。
这个黑点肯定是要去掉的啦，我们可以用 font-size:0;line-height:0; 将其去掉。
好了，现在在两个阵营的浏览器里都实现目标了。以下是 ul 所有的CSS代码：
ul {
margin:0;
padding:10px;
list-style:none;
background-color:#006699;
zoom:1;/* IE */
}
ul:after {
content:".";
display:block;
clear:both;
height:0;
font-size:0;
line-height:0;
}
第二种方法
我刚说过不止一种方法可以解决，那现在就来说说第二种方法。第二种方法还要更简单一些。同样，需要将浏览器分成两个阵营。不过和上一个有所不同，这 一次 IE7 站到了另外一个阵营。即 IE7， Firefox， Opera， Safari 等（这里暂时称为A浏览器）。对于这些浏览器，只要定义一个 overflow:auto; 即可，但是对于 IE6 和 IE5 （称为B浏览器）却不起作用。不过要 IE6，IE5 听话也很简单。只要定义一个高度即可，哪怕是 0 ，也会自动伸长。知道这些还没用，我们还得区分这两个阵营的浏览器才行。怎么区分呢？
A 浏览器支持属性选择符，而B浏览器不支持。
所以以下代码只有A浏览器才会执行。
[xmlns] ul { /* html[xmlns] ul 的简写 */
overflow:auto;
}
需要注意的是HTML 必须要有《 ！DOCTYPE 》头部以及《html》有xmlns属性才会起作用。不过这个问题似乎不大，现在绝大部分网页都有这两个东东，包括 Dreamweaver 默认新建的网页都会自动加上。
而对于B浏览器则可以通过以下方式：
* html ul {
height:1%;
}
其实 height 完全可以写成 0，为什么要写1%呢？告诉你其实我也不知道，大家都这么写。
好了，第二种方法的 ul 全部样式代码如下：
ul {
margin:0;
padding:10px;
list-style:none;
background-color:#006699;
}
[xmlns] ul { /*html[xmlns] ul 的简写*/
overflow:auto;
}
* html ul {
height:1%;
}
标签: 自适应高度
分享到：
发表评论
-
data:image/png;base64是什么
2014-11-29 14:38 2677源：http://copier.blog.163.com/bl ... -
jquery 中获取所有选中的checkbox的用法
2014-03-31 17:20 578源：http://hi.baidu.com/yy3b2007c ... -
em（倍）与px的区别
2013-12-25 10:20 460源：http://www.cnblogs.com/showke ... -
CSS 外边距合并
2013-12-23 09:54 552源：http://www.w3school.com.c ... -
CSS网页布局教程:绝对定位和相对定位
2013-12-22 23:29 812源：http://www.webjx.com/css/ ... -
标准流,非标准流,盒子模型
2013-12-22 22:26 491源：http://blog.csdn.net/mylovest ... -
DIV+CSS两种盒子模型
2013-12-22 21:23 497源：http://www.cnblogs.com/re ... -
html中<a>标签_top和_parent的区别
2013-03-27 11:20 2470源：http://blog.sina.com.cn/s/b ... -
js和css控制鼠标略过和点击后的样式
2013-03-11 21:36 2695源：http://blog.csdn.net/xn4545 ... -
js脚本添加书签到收藏夹
2013-03-05 20:06 1079javascript:window.external.addF ... -
30条HTML代码编写指南 for入门者
2013-01-20 14:17 823源：http://www.cnblogs.com/xly12 ...
相关推荐
li浮动还可以居中ul.html
浮动层自动适应高度的问题在网页布局中经常遇到，特别是在创建多列布局或者使用浮动元素时。浮动元素会导致其父元素高度塌陷，也就是父元素无法自动扩展到包含所有子元素的高度。这个问题在标题中提到的示例中表现得...
在这个例子中，目标是当向 `ul` 添加新的 `li` 时，`div.main_div` 的高度能够自动适应这些 `li` 的总高度。以下是实现这个目标的思路： 1. **设置 `li` 的固定高度**：通过 `.main_div li` 中的 `height:170px;`，...
4. **处理浮动后的父元素高度问题**：由于浮动，可能会导致父元素的高度塌陷，可以通过`clearfix`方法或使用Flexbox解决。 - 使用`clearfix`方法： ```css .horizontal-nav:after { content: ""; display: ...
这段代码首先将ul元素设置为向左浮动，ul内的li元素同样设置为向左浮动，并清除默认的列表样式，从而达到既横向排列又去点的效果。 在讲完列表的横向排列后，我们再来扩展一下关于列表样式的其他知识点。CSS为ul、...
`使`<li>`元素左浮动，形成多列布局，`margin`添加间隔以模拟表格边框。 - 使用不同的背景颜色（例如`#ccc`和`#999`）来区分表头和普通单元格。 3. **表格布局的灵活性**： - 使用`<ul>`和`<li>`的优点在于可以...
但是当高度不一致时，就需要想别的办法来解决了： 1、给父元素定义font-size:0; 浮动子元素定义需要的font-size， 再定义display:inline-block;vertical-align:top; 复制代码代码如下: ul{ margin:0; padding:0; ...
在“CSS无难事-浮动floatright的应用和li的高度问题”这个主题中，我们将探讨`float:right`的用法以及`<li>`元素高度问题的解决策略。 首先，让我们了解`float:right`。当将一个元素的`float`属性设置为`right`时，...
本文将详细介绍两种利用CSS实现`<ul>`和`<li>`横向排列的方法。 ### 方法一：使用`float:left` 首先，我们可以使用`float`属性来改变`<li>`元素的行为。默认情况下，`<li>`是块级元素，占据一整行。通过将`<li>`的...
在网页设计中，列表（LI元素）的布局是一个常见的需求，尤其是当需要将列表中的项目水平显示在一行内，并且要求这些项目居中显示时。通常情况下，列表项会使用CSS的浮动属性（float）来实现横向布局，比如左浮动。...
这种方法简单易用，但需要注意的是，浮动元素会影响到其后的元素布局，可能导致父元素高度塌陷。为了解决这个问题，通常需要添加一个清除浮动的元素（如`;"></div>`）或者使用`clearfix`类。 ### 方法二：使用`...
首先，标题和描述中提到的问题是，当`<li>`元素被设置为浮动时，外层的`<div>`或`<ul>`的背景无法正常显示。这是因为浮动元素不再占据原来的空间，导致父元素（如`<ul>`或包含`<ul>`的`<div>`）的高度无法被正确计算...
标题提到的“浮动后的li元素居中实现方法”主要探讨了如何在使用浮动布局时，确保`<li>`元素在导航条中居中对齐。以下是几种常用的方法及其优缺点： 1. **文本居中对齐**： - 在包裹`<ul>`的`<div>`上应用`text-...
本文将深入讲解如何使用CSS来控制`<ul>`和`<li>`的样式。 首先，`<ul>`标签用于创建一个无序列表，每个列表项由`<li>`标签包裹。在默认情况下，浏览器会为`<ul>`添加圆形的项目符号，而`<li>`则会有一定的内缩进。...
在网页设计中，经常需要对列表元素（`<ul>` 和 `<li>`）进行布局调整，使其适应不同的展示需求。本问题中提到的"将ul+li 分两列显示(横向显示)"，实际上是要将一个单列的列表转换成两列，并且保持列表项水平排列。...
要使`<li>`在IE6中根据内容自动增长宽度，可以采用以下方法： ```css li { max-width: 100px; /* 修改为你期望的最大宽度 */ width: expression(document.body.clientWidth > 100 ? "100px" : "auto"); overflow...
需要注意的是，使用浮动布局时可能会导致一些布局上的问题，例如父容器高度塌陷，这就需要使用清除浮动（clear-fix）等技术来解决。同时，对于复杂的布局需求，可能需要更高级的CSS布局技术，如CSS Flexbox或Grid，...
首先，我们需要创建一个`<div>`作为导航栏容器，然后在其中嵌套一个`<ul>`标签，`<ul>`中包含多个`<li>`标签，每个`<li>`代表一个导航链接： ```html <ul> <li>首页</a></li> <li>关于我们</a></li> <li>服务...
10. **Flexbox和Grid布局**：现代CSS布局方法，如Flexbox和Grid，可以方便地对`<ul>`内的`<li>`元素进行灵活的布局控制，实现复杂的列表布局。 这份5页的PDF文档可能详细阐述了以上各个方面的用法和实例，帮助...