实现超过宽度的时候的横向排列，逆向思维
1.外层box width短 overflow:hidden
2.内层box width长 overflow:hidden
3.ul,li在ie系列下margin-bottom bug,ie6在奇数时显现此bug
<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0}
body{ font-size:12px; line-height:160%;}
ul,li{ list-style:none}
.c:after{ content:""; display:block; height:0; clear:both; vertical-align:hidden}
.c{ zoom:1}
.ullist_box{ width:684px; background-color:green; padding:0 8px 0; margin:0 auto; overflow:hidden;}
.ullist{ width:731px; overflow:hidden;zoom:1;}
.ullist ul{ width:220px; float:left; height:100px; background-color:red;margin-bottom:15px; border:#ccc 1px solid; margin-right:20px; overflow:hidden;}
</style>
</head>
<body>
<div class="ullist_box">
<div class="ullist c2">
<ul><div style="width:220px; background-color:blue; height:100px;">fd11</div></ul>
<ul><div style="width:220px; background-color:blue; height:100px;">fd222</div></ul>
<ul><div style="width:220px; background-color:blue; height:100px;">fd11</div></ul>
<ul><div style="width:220px; background-color:blue; height:100px;">fd222</div></ul><ul><div style="width:220px; background-color:blue; height:100px;">fd11</div></ul>
<ul><div style="width:220px; background-color:blue; height:100px;">fd222</div></ul><ul><div style="width:220px; background-color:blue; height:100px;">fd11</div></ul>
<ul><div style="width:220px; background-color:blue; height:100px;">fd222</div></ul>
<ul><div style="width:220px; background-color:blue; height:100px;">fd222</div></ul>
</div>
</div>
</body>
</html>
解决方法：li---->>float-------->>display:inline;然后在对IE系列作* hack处理
2.如果是等间距换种方法：li用右上margin,ul用左下padding
具体参考此网址：http://www.52css.com/article.asp?id=907
看看人家的笔记在对付li列表排列的时候的处理，也是借用这种思路．
我们先创建一个示例片段：
<style type="text/css">
#menu{
float:left;
}
</style>
<div id="menu">
<ul class="wrap">
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
<li>菜单5</li>
</ul>
</div>
最优的清除浮动：
.wrap{zoom:1;}
.wrap:after{content:"";clear:both;display:block}
[color=red]但这样做有个问题要注意：用zoom:1的话,在ie7下面里面的元素如果有margin-bottom，那最下面的元素的margin-bottom会失效。[/color]
不是浮动引起的，，是ie在li列表排列的一个的一个bug,
所以最优、最精简的列表浮动样式是：
.wrap{zoom:1;padding:0 0 10px 10px;}
.wrap:after{content:"";clear:both;display:block}
.wrap li{float:left;margin:10px 10px 0 0;}
优点解释一下：
1.防止了ie7的margin-bottom的bug
2.防止了overflow和display:table的bug
3.最少的代码实现标签浏览器的清除浮动
4.防止了里面元素的双倍margin
分享到：
相关推荐
当使用无序列表（`<ul>`）创建导航菜单时，IE6有时会使列表项呈现阶梯状布局，而不是整齐的行排列。这主要是由于IE6对浮动元素处理不当导致的。 **解决方案**： - **方法一**：在`<li>`元素上添加`float: left;`...
在Web开发领域，Internet Explorer（IE）曾是程序员们的一大挑战，尤其是对于前端开发者来说，因为IE中存在许多特有的bug。这些bug不仅让开发者头疼，还严重影响了开发效率。本篇将详细介绍9个最常见的IE bug及其...
在实际应用中，开发者可以根据具体需求选择合适的方法来修复这个Bug，以保证在IE6/IE7中的布局效果与预期相符。 总之，这个IE6/IE7的`<li>`底部4px空隙Bug是由于浏览器解析CSS时的非标准行为导致的，开发者可以通过...
4. **避免使用`<p>`标签**：在某些情况下，如果行间距不是必需的，可以考虑使用无序列表`<ul>`、有序列表`<ol>`或者简单的`<div>`来代替`<p>`标签。 5. **使用绝对单位**：使用像素（px）而非相对单位（em）来设定`...
认识IE6、IE7特定选择器； ?margin-bottom失效情况的解决； ?将icon图标集成于一个图片文件； ?设置链接变换小图标的样式； ?一张图片实现菜单的多种状态； ?相对单位em在文本缩进中的应用； ?浮动属性的灵活...
在网页设计中，`<ul>` 无序列表是一个常用元素，用于组织和展示信息。在某些情况下，设计师可能希望自定义列表项的外观，比如用特定的图标替换默认的圆点或方框。然而，当尝试使用 CSS 的 `list-style-image` 属性来...
在上述情况下，转换为使用`ul`（无序列表）和`li`（列表项）元素是一个明智的选择。虽然这可能意味着需要调整CSS样式以适应新的布局，但至少在所有主流浏览器中，`ul`和`li`的`innerHTML`操作是可靠的。此外，这种...
在IE6/7与Firefox中，对于设置了 `float` 的元素，它们的外边距可能会出现差异。为了解决这一问题，可以将元素的显示模式设置为 `inline`： ```css #IamFloat { float: left; margin: 5px; /* IE中为10px */ ...
解释：在 CSS 中，可以使用 list-style-type 属性来设置无序列表的样式。 6. 在新窗口打开链接的方法是 target="_blank"。 解释：在 HTML 中，可以使用 target 属性来指定链接的打开方式，“_blank” 表示在新窗口...
在HTML中，有两种主要的列表类型：无序列表（`<ul>`）和有序列表（`<ol>`）。本教程将深入讲解这两种列表以及如何使用CSS对其进行样式化。 1. **无序列表（`<ul>`）与有序列表（`<ol>`）** - **无序列表**：无序...
首先，`<li>`标签（列表项）通常用于`<ul>`（无序列表）或`<ol>`（有序列表）中，用来创建列表结构。默认情况下，浏览器会为每个`<li>`元素添加一个列表符号，如圆点或数字，以区分各个列表项。 在标准浏览器如Fire...
在IE6浏览器中存在一个著名的3像素bug，当浮动元素与非浮动元素相邻时，IE6会在两者之间显示3像素的空隙。解决这个问题，可以在有问题的元素上添加`_margin-right:-3px;`，这里的下划线是针对IE6的私有属性。请注意...
- 首先，通过`<ul>`和`<li>`结构创建无序列表，然后使用CSS进行样式化。 - `list-style:none`去除`ul`前的默认项目符号。 - `float:left`使`li`元素水平排列。 - 使用`display:block`和`width`、`padding`等属性...
3. IE6的3像素Bug：这是一个经典的浏览器兼容性问题，当一个浮动元素与非浮动元素相邻时，IE6会在两者之间显示3像素的空隙。解决方法是在浮动元素上添加`_margin-right:-3px;`，这里的下划线表示这是针对IE6的私有...
Css复习题中关于浏览器默认样式的说法正确的是：IE默认页边距为10px，通过body的margin属性设置，FF默认页边距为8px，通过body的padding属性设置，IE默认列表左缩进为40px，通过ul、ol的margin属性设置，FF默认列表...
- 导航本质上是一个无序列表，适合用<ul>和来表示。 - 使用合适标签有助于内容的结构化。 16. Web标准与CSS布局： - CSS布局是实现Web标准的一部分，但并非全部。 - Web标准涉及HTML、DOM、JavaScript等多个...
在IE6和IE7中，`<li>`元素默认的`display`值为`block`，这使其表现出典型的块级元素特征。而在其他A-Grade浏览器（如IE8+，Webkit（Safari和Chrome），Firefox，Opera）中，`<li>`元素的默认`display`值是`list-item...