解决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- ...
随机推荐
- 爬虫1_python2
# -*- coding: UTF-8 -*- # python2爬虫 import urllib f = urllib.urlopen("http://www.itcast.cn/&quo ...
- JavaScript onkeydown事件入门实例(键盘某个按键被按下)
JavaScript onkeydown 事件 用户按下一个键盘按键时会触发 onkeydown 事件.与 onkeypress事件不同的是,onkeydown 事件是响应任意键按下的处理(包括功能键 ...
- opensuse 15.0 安装ctdb
问题 1 2019/05/20 15:27:14.574363 ctdb-eventd[26329]: 60.nfs: /etc/ctdb/nfs-linux-kernel-callout: line ...
- python学习笔记-环境安装【1】
1.在 WINDOWS 下面要运行命令 pip install virtualenvwrapper-win才行 参考地址http://blog.csdn.net/liuhongyue/article/ ...
- linux - mysql 安装教程
环境介绍>>>>>>>>>>>>>>>>>> 操作系统:Centos 7 mysql数据库版 ...
- 使用struts2实现文件上传与下载功能
这个问题做了两天,在网上找了很多例子,但是还有一些功能没有实现,暂时先把代码贴出来,以后在做这方面的功能时在修改 文件上传: 一开始我在网上找到基于servlet+jsp环境写的文件上传,但是在将页面 ...
- MySQL索引类型及优化
索引是快速搜索的关键.MySQL索引的建立对于MySQL的高效运行是很重要的.下面介绍几种常见的MySQL索引类型. 在数据库表中,对字段建立索引可以大大提高查询速度.假如我们创建了一个 mytabl ...
- 解决cocos游戏安卓release版本闪退问题
在cocos中偶尔会遇到闪退的问题,特别是android和ios系统下的闪退就特别难处理了, 虽然说能使用xcode和eclipse显示log,但是也会出现一些特别的情况,直接闪退而且 没有任何预兆. ...
- mount命令的用法,以及技巧光盘镜像文件、移动硬盘及U盘的方法
本文介绍mount命令的用法,以及技巧光盘镜像文件.移动硬盘及U盘的方法. 一,挂接命令(mount) 挂接(mount)命令的使用方法. 命令格式: 复制代码 代码如下: mount [-t vfs ...
- ES6学习总结 (二)
一:ES6为函数做了哪些扩展 参数的默认值 传统写法: function person(n,a){ var name =n || "zhangsan"; var age = a | ...