解决方法 一：
使 li 浮动，并设置 img 为块级元素
ul{width: 280px;}
ul li{float:left;display:block;height:57px;width:277px;}
img{display: block;}
解决方法 二：
设置 ul 的 font-size:0;
ul{width: 280px;font-size: 0;}
ul li{display:block;height:57px;width:277px;}
解决方法 三：
设置 img 的 vertical-align: bottom;
ul{width: 280px;font-size: 0;}
ul li{display:block;height:57px;width:277px;}
img{vertical-align:bottom;}
解决方法 四：
设置 img 的 margin-bottom: -5px;
ul{width: 280px;font-size: 0;}
ul li{display:block;height:57px;width:277px;}
img{margin-bottom: -5px;}
分享到：
相关推荐
在网页布局设计中，`div ul li` 的嵌套结构是一种常见的实现列表展示的方法，尤其在构建导航栏、产品展示等场景中。然而，当我们在这样的结构中动态添加多个 `li` 元素时，如何让包含它们的 `div` 自动调整高度以...
在本场景中，我们要讨论的是如何使用CSS（Cascading Style Sheets）来对`div`内的`ul`和`li`元素进行样式设置，特别是将图片以特定方式排列。`div`常作为容器，`ul`和`li`则常用于创建无序列表，这里可能是指将一...
14. **IE中的img空白**：解决IE中`li`下面`img`下方的空白，可以使用浮动布局或设置`font-size:0`，但调整`img`的`margin-bottom`不是推荐方法。 **填空题知识点**： 1. **静态页面语言**：`XHTML`是一种基于`XML`...
标题中的“图片自动轮播用li做上下控制柄div+css+jquery”指的是一个使用HTML、CSS和jQuery实现的图片轮播效果，其中利用`<li>`元素作为控制按钮，`<div>`作为轮播容器，并通过CSS进行样式设计，jQuery进行动态交互...
为了让图片在`div`中垂直居中，可以在`img`标签中加入`align="absmiddle"`属性。 **HTML示例代码：** ```html <div style="height: 100px;"> <img src="image.jpg" alt="示例图片" align="absmiddle"> </div> ```...
### CSS+DIV实战教程知识点详解 #### 一、概述 本教程通过实例讲解了如何使用CSS和DIV进行网页布局设计，特别聚焦于“浮动（float）”这一关键特性。通过两天的学习，读者能够掌握基本的CSS+DIV布局技巧，包括整体...
这样设置后，即使在IE6中也能确保`div`的高度为1px。 #### 七、ID与CLASS的问题 **问题描述**：在页面布局中，如何合理使用ID和CLASS？ **解决方案**： - 当一个样式需要在页面中多次使用时，应该使用CLASS而...
在学习DIV+CSS时，许多新手都会遇到一些常见的问题，本文总结了八个常见的问题和解决方案，涵盖了网页居中显示、文字垂直居中显示、图片垂直居中显示、清除浮动、多列结构的DIV写法、Textarea在FireFox中不能自动...
例如，通过浮动，我们可以让多个`div`元素并排显示： ```css div.box { float: left; width: 30%; margin-right: 10%; } ``` 在这个例子中，所有具有`.box`类的`div`元素会左浮动，并占用30%的宽度，留下10%的...
在Web开发中，通过JavaScript（简称JS）和CSS结合可以实现很多动态效果，其中“鼠标经过显示隐藏div”就是一个非常实用的功能。本文将详细解析如何利用这些技术来实现一个响应鼠标事件、能够显示和隐藏特定元素（本...
padding:5px 15px 4px 6px; color:#627EB7; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs1 a span {float:none;} /* End IE5-Mac hack */ #tabs a:hover span { color:#627EB7; } #...
在网页布局中，DIV是一个非常重要的元素，它可以帮助我们将页面划分为多个独立的区域。通过CSS，我们可以控制每个DIV的尺寸、位置以及与其他元素的关系。"鼠标放上去放大"的特效同样可以应用到DIV上，比如展示图片或...
例如，`div`的居中对齐在Firefox中可以通过`margin: auto`实现，但在IE中则需要`text-align: center`配合。此外，不同的DOCTYPE会影响CSS的处理方式，因此在编写CSS时要考虑到不同浏览器的差异，并进行适当的调整。 ...
### CSS+DIV兼容方法详解 在网页设计领域，CSS（层叠样式表）与HTML的div元素结合使用，成为创建动态、响应式网页布局的主要工具。然而，由于不同浏览器对CSS的支持程度存在差异，实现跨浏览器兼容性成为前端开发者...
- **列表项的图标处理**：对于`<li>`元素的列表项，推荐使用`background-image`或`list-style-image`来设置图标，这比直接使用`<img>`标签更为灵活。 - 示例代码： ```css ul { list-style-image: url("icon.png...
14. **清除IE图片底部空白**：在`li`元素包含`img`时，可以使用浮动或设置`font-size:0`解决，但设置`img`的`margin: 0`或`margin-bottom: -5px;`并不总是有效。 **填空题知识点**： 1. **WEB标准静态页面语言**：...
<li><img src="img/m2.png" width="100px" height="30px"/></li> <li>xx 会员</li> <li>喵鲜生</li> <!-- 更多轮播图内容... --> <!-- 轮播图 --> <div id="div_m_r_1"> <div id="div_lunbo"> <div id=...