行内元素不换行的处理
来源:互联网 发布:淘宝手机端红包设置 编辑:程序博客网 时间:2024/06/07 08:35
1、代码
<div style="width: 100px;overflow: visible;"> <div style="display: inline-block;"> <ul style="display: inline-block;"> <li>亚洲</li> <li>欧洲</li> <li>北美洲</li> </ul> <ul style="display: inline-block"> <li>中国</li> <li>美国</li> <li>印度</li> <li>日本</li> </ul> </div></div>
2、不想要的效果
3、上图看得出已经换行了,不是我想要的效果;
为什么会换行?
两个原因,第一:父元素宽度限制为100px,我们的内容可不止这么点宽度;第二:white-space的默认取值为normal,什么意思呢?父元素宽度不够时换行呗;
那么我想让它不换行该怎样做呢?
white-space:nowrap;这行css代码什么意思?文本不会换行,文本会在同一行上继续,直到遇到 <br> 标签为止。
4、正确代码
<div style="width: 100px;overflow: visible;"> <div style="display: inline-block;white-space: nowrap"> <ul style="display: inline-block;"> <li>亚洲</li> <li>欧洲</li> <li>北美洲</li> </ul> <ul style="display: inline-block"> <li>中国</li> <li>美国</li> <li>印度</li> <li>日本</li> </ul> </div></div>就是加了white-space:nowrap;而已。
5、正确的效果
6、max-content
也可以使用width:max-content达到相同效果
兼容写法
width: -moz-max-content; width: -webkit-max-content; width: -o-max-content; width: -ms-max-content; width: max-content;
7、项目效果
阅读全文
1 0
- 行内元素不换行的处理
- 网页中 li 标签内元素 不换行的解决办法
- 如何可以让div内的元素不换行?
- 行内元素出现换行的情况
- 块状元素、行内元素、行内块状元素同行换行显示以及float后的情况
- 表格内文字不换行
- td内的文本或控件不换行
- 解决容器内文字不自动换行的问题
- 如何处理元素内的空白
- PHPword 表格内换行处理
- 处理inline元素之间换行产生的空白
- 处理inline元素之间换行产生的空白
- 表格处理:换行还是不换行?
- 块元素/行内元素的转变
- DataGrid控件中内容不换行的处理
- ASP.Net DataGrid单元格不换行的处理
- 针对全字母或全数字不换行的处理
- 行内元素的特性
- Hadoop伪分布式安装,出现DataNode节点无法正常启动
- dbcp和c3p0的使用
- 内存泄漏检测工具VLD在VS2010中的使用举例
- 7-1 六度空间(30 分)
- 欢迎使用CSDN-markdown编辑器
- 行内元素不换行的处理
- springMVC的适配器模式
- 欢迎使用CSDN-markdown编辑器
- js 中的&& 与|| 之间的区别
- AFNetworking源码解读之AFSecurityPolicy模块中的Https验证
- spring Security4 和 oauth2整合 注解+xml混合使用(注意事项篇)
- spring cloud之安全访问(八)
- 织梦读取数据库几个用法
- IntelliJ IDEA检出web工程笔记