解决ul的li横向排列换行的问题
1. 问题现象
先看下面的html结构:
<div>
<ul>
<li><img src='./img/1.jpg'></li>
<li><img src='./img/2.jpg'></li>
<li><img src='./img/3.jpg'></li>
<li><img src='./img/4.jpg'></li>
</ul>
</div>
外层div设定了固定宽度,css中ul的宽度未设置(因为li的个数不确定),当通过javascript动态设置ul的宽度后,会导致li换行。
2. 分析
尝试将ul的宽度增大,问题消失,推测是计算的ul宽度不准确,经过思考推敲,原来是我为li设置了1px的borde,但是计算ul宽度时,没有考虑到border,将border宽度加进去,一切正常。
ul的宽度 = (li的width + li的左右margin + border)*li的length。
3. 总结
已经遇到过几次了,一直没有找到原因,在网上曾搜索到两种解决方法:
一种是:给ul添加 white-space:nowrap; 将li的 float:left; 改成 display:inline-block; 试了,chrome、ff、ie8以上不会换行,但是最后一个li内容不能显示完全,ie6,7则无任何作用。
另外一种是:将li设置为 display:table-cell; 同时li的margin改成padding,但是这样的话,影响了本来的布局。
所以,当你遇到ul的li有一个或几个换了行,请先确认下有没有为li设置了border,如果有,那么检查下ul的宽度是否已经考虑了border。如果li没有border,那么可以试试我说的上面那两种解决方法。
解决ul的li横向排列换行的问题的更多相关文章
- ul li横向排列及圆点处理
如何用CSS制作横向菜单 让ul li横向排列及圆点处理 第一步:建立一个无序列表 我们先建立一个无序列表,来建立菜单的结构.代码是:<ul> <li><a href ...
- CSS + ul li 横向排列的两种方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 无序列表li横向排列的间隙问题
今天在写页面的时候,无意中遇到这样一个问题,就是无序列表li横向排列即做成导航栏时,列表项间有间隙. 如: 将列表项li变成列表块后(即将li标签设置为,display:inline-block后), ...
- css ul li 横向排列
因为li是块级元素,默认占一行的,要想实现横向排列,一般通过以下两个方法:float:left这样设置有一个问题,li浮动以后则脱离了文本流,即不占位置,如果它的父级元素有具体的样式且没有固定宽高,建 ...
- 无序列表li横向排列
一.横向两列方式排列: 在网页中,很多地方都会用到无序列表横向排列的形式,通常的写法都是使得li的css样式设置为:float:left的形式即可,li会依次从最左边开始并列对齐, 例如: HTML中 ...
- 菜单制作:ul li横向排列
CSS菜单制作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- CSS中如何将li横向排列
直接贴段例子代码吧: @{ Layout = null;} <!DOCTYPE html><style type="text/css"> .test li ...
- 鼠标滑过,解决ul下 li下a的背景与父级Li不同宽的问题
我们在写导航或者页面有超链接的地方,有一些是需要超链接的背景和Li的宽度一样的.但是,却没有达到这种效果?为什么? 我们做的效果图:如下 期望的效果:如下 出现这样的原因:由于a是个行内元素,它没有宽 ...
- 如何使ul中li元素横向排列且不换行
外层div容器宽度固定,ul宽度随li(li宽度固定)的增加而撑开,但是当ul中li的宽度之和大于div时,ul没有撑开,而是li换行了,如何使li不换行? 解决方法:主要是外面容器设置为white- ...
随机推荐
- 【转】学习apicloud和IOS之间的模块化使用
最近公司有使用APICloud发开的需求,需要我这边提供一些模块包得封装.因为没有也是刚接触APICloud,所以也就在看官方文档 .下面讲一讲我再使用过程中得一点点东西. 首先,下载官方SDK,下载 ...
- ACM博弈论基础
博弈论的题目有如下特点: 有两名选手 两名选手交替操作,每次一步,每步都在有限的合法集合中选取一种进行 在任何情况下,合法操作只取决于情况本身,与选手无关 游戏败北的条件为:当某位选手需要进行操作时, ...
- 使用EventLog组件向本机现有日志中添加条目
实现效果: 知识运用: EventLog组件的MachineName属性 //获取或设置在其上读取或写入事件的计算机名称 public string MachineName {get;set; } ...
- 个人对spring的IOC+DI的封装
暂时支持8种基本数据类型,String类型,引用类型,List的注入. 核心代码 package day01; import java.lang.reflect.Field;import java.l ...
- 01_1JAVA简介
01_1JAVA简介 1. Java基础 语法基础.OO.Exception.Array.基础类.I/O Stream.Collection /Generic.Thread.TCP/UDP.GUI.M ...
- 使用max函数计算EXCEL个税公式
1.Max()函数是求括号内的数的最大值.2.其中,第一和第二个大括号{}内的数,相信作为财务的应该很清楚,就是个人所得税的缴税比例,以及速算个人应缴所得税的相关数据.3.在EXCEL中,使用{}表示 ...
- TCP、UDP的区别
TCP(传输控制协议): 1)提供IP环境下的数据可靠传输(一台计算机发出的字节流会无差错的发往网络上的其他计算机,而且计算机A接收数据包的时候,也会向计算机B回发数据包,这也会产生部分通信量),有效 ...
- Python爬虫系列-Requests库详解
Requests基于urllib,比urllib更加方便,可以节约我们大量的工作,完全满足HTTP测试需求. 实例引入 import requests response = requests.get( ...
- destoon 给超级管理员系统权限(管理员管理,日志管理等)
destoon 后台某些系统权限除了网站创始人之外其他超管事没有权限的,现需要给其他超级管理员添加普通管理员的权限. 1.首先 admin/global.func.php admin_check函 ...
- R-data.table
data.table可以扩展和增强data.frame的功能,在分组操作和组合时访问速度更快. require(data.table) theDT = data.table(A=1:10, B=let ...