li图片列表排列错乱问题

最新推荐文章于 2021-09-17 22:21:06 发布
最新推荐文章于 2021-09-17 22:21:06 发布
阅读量1k 收藏
点赞数
分类专栏： WEB前端技术 文章标签： float ie
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/phptripper/article/details/6236660
版权

图片列表在IE下排列错乱，给li定义高度后就好了

.product_img{width: 600px;margin: 0px auto; margin-top:10px;}

.product_img li{float:left;display:inline;margin:10px;padding: 2px; border: 1px solid #EEE;text-align: center;width: 124px;height:110px;}

 

修改前的样式

 

错乱的列表

 

修改后的样式

 

phptripper
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
通过ul li遍历出来的图片，高度不一致，导致图片错位的解决方案
qq_32908349的博客
04-15 1678
通过ul li遍历出来的图片，高度不一致，导致图片错位的解决方案 编号为1的容器，高度大于其他三个容器，导致3、4错位 vue <div class="content" > <ul> <li v-for="item of list" :key="item.id" > <img class="img-content" :src="...
html在ie里样式乱了,div布局 css样式 float:left IE显示错乱 其他浏览器正常
weixin_39538847的博客
06-15 2219
div布局css样式float:leftIE显示错乱其他浏览器正常0Create AccountIE下测试 左边DIV不正常显示(div中放入数据测试)其他浏览器都可以下边是 CSS 样式#content {margin:16px;}#styled .formframe {border:solid 2px #b7ddf2; background:#ebf4fb;}#styled h1 {f...
HTML+CSS解决ul和li的错位、换行问题
热门推荐
liboqiao1234的博客
02-12 1万+
这篇博客主要是讲如何解决ul和li的一些问题，作为一个CSS大白，作者最近再做一个非常简单的导航栏（一个ul中套4个li，一行）的时候遇到了很多问题。下面将一一讲述。 问题如下： 1.ul中的li如何横向排序？ 2.display:inline、inline-block、block有什么区别？ 3.为何分配好100%后会换行？ 4.为何ul与li会错位？ 1.ul中的li如何横向排序？...
group_concat order by 字符串的排序混乱
u012160319的专栏
12-30 3488
mysql group_concat子句使用order by 进行字符串排序时，若字符串值为数字，排序错位，比如： mysql> select `size_group_id`, group_concat(name order by name asc) as sizes from `basic_sizes` where `size_group_id` in (2, 1) group by ...
li标签、div标签等高度不同，依次排列错乱
小楼一夜听春雨
09-20 6799
很多时候，我们依次成列一些东西比如图书、图片等等，我们正常会用“float：left”，由于上一行的li或者div等因为内容的原因导致高度不一致，会使下一行的排列出现错乱，如下图： 解决方案： 去除”float:left”，使用”display: inline-block”；默认都是底部对齐，如果想顶部对齐，我们可以设置”vertical-align: top;”。
CSS 图片横向排列实现代码
09-05
以上CSS规则将创建一个横向排列的图片列表，每个图片项都有预设的尺寸和间距。然而，这个示例代码可能需要根据实际项目的需求进行微调，比如更改图片大小、间距，或者适应响应式布局。此外，由于这里使用了Base64...
CSS实现ul和li横向排列的两种方法
11-21
在网页布局设计中，我们经常需要将`<ul>`列表中的`<li>`元素横向排列，以便创建导航栏或其他水平展示的内容。本文将详细介绍两种利用CSS实现`<ul>`和`<li>`横向排列的方法。 ### 方法一：使用`float:left` 首先，...
jquery实现图片随机排列的方法
10-24
在网页设计中，有时我们需要创建一个动态效果，使得页面中的图片能够随机排列，提升用户体验...这只是一个基础的实现方式，实际应用中可以根据项目需求进行优化和扩展，例如添加动画效果，或者支持更多的图片排列规则。
图片列表按顺序分类排列
06-04
标题“图片列表按顺序分类排列”暗示我们讨论的是一个网页应用或者前端项目，它涉及到将图片按照特定顺序和类别进行组织和展示。这种功能在很多网站中都很常见，比如在线画廊、产品展示或者个人相册等。接下来，我将...
CSS实现带有小图片的LI图标列表菜单
12-13
本文将详细解析如何使用CSS来实现一个带有小图片的LI图标列表菜单，这对于提升网站的用户体验具有显著作用。 首先，我们需要理解HTML结构。在提供的代码中，我们可以看到一个无序列表`<ul>`，它具有一个ID "nav"，...
div ul li排列图片的样式
07-24
div ul li排列图片的样式 css + div
ul li与图片排列
kingisking1的专栏
11-24 1383
/*css样式*/ #j_pic70{ width:360px; margin:0 0 0 5px ;} #j_pic70 li{ width:70px; float:left;} #j_pic70 li a{ width:68px;display:block; border:1px solid #fff; } #j_pic70 li a img{ width:68px; height:6
js实现点击按钮使图片排序
qq_48294048的博客
09-17 1146
效果 1 、点击按钮 如果按钮文字是从大到小将li标签按照从大到小的顺序排列文字改成从小到大 如果按钮文字是从小到大将li标签按照从小到大的顺序排列文字变成从大到小 2 、点击按钮将li随机排序 <style> * { padding: 0; margin: 0; list-style: none; ...
页面图片错位问题
zydar的专栏
11-01 1815
用photoshop直接导出为html网页时，有时会出现图片错位问题，解决方法从IE-->查看-->文字大小，将文字大小适当改变即可~
li 排列不错位
卯野芽衣子
02-29 261
li{display:inline-block;width:31%;margin:50px 1% 0px;vertical-align:top;}
【坑爹系列】常见的图片排列错位问题-根源分析及解决方案
一名普通码农的菜地
09-25 6216
前言诶，ie6，ie7这些顽固的浏览器我就不管了，反正现在主要开发移动网页，可以用到html5，css3的很多很多特性。背景介绍近日做了一个小小项目，是一个很流行的通过微信投票然后选出最最美，最最好的某某某，然后给奖励的。 其中一个比较重要的点就是要保证上传的图片的比例尺寸一致，当然我们不采用固定尺寸—采用的是固定比例的方式，为此我做了一个pc端移动端通用的裁剪工具。这个问题跟这个裁剪工具还有浏览
css列表横向排列文字和图片
最新发布
07-13
2. **带图片的列表项 (`li`)**: 每个列表项包含一个 `img` 元素和一些文本，可以这样组合样式： ```html <li> 描述1" style="width: auto; height: auto; max-width: 50%; float: left;"> ;">文字描述1 </li> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值