用nowrap实现div内的元素不换行
在编写自定义插件my-slider的过程中,发现无论float还是inline-block均不能保证div内的内容不换行(这两个属性在内容超出容器尺寸后,均将剩余内容做换行处理),在浏览器内比较了自己定义的my-slider-item和mui框架定义的mui-slider-item,发现其用了:white-space:nowrap属性,在MDN、w3cshool里分别查阅了该属性,描述如下:
MDN:

w3school:

即:对父级元素应用了nowrap属性后,其内部的内联元素、字符、果冻元素会保持在一行(不换行),直到遇到<br>换行符。
综上,当我们希望块内的元素一直水平排列不换行(如想做横向滚动效果),处理思路就是:
1. 将块级元素降级为果冻元素、行内元素
2. 对果冻元素、行内元素应用white-space:nowrap样式
.my-slider-group{
overflow: hidden;
white-space: nowrap;
}
.my-slider-group .my-silder-item{
display: inline-block;
width:100%;
}
end...
用nowrap实现div内的元素不换行的更多相关文章
- div内快元素[div,p。。。]居中办法
方法1: .parent { width:800px; height:500px; border:2px solid #000; position:relative; } .child { width ...
- HTML元素分类:块级元素 内联元素和内联块状元素
在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 1,块状元素 常用的块状元素有: <div>.<p>.<h1 ...
- CSS的块级元素和内联元素,以及float
说明:之前有一点搞错了,就是float其实是浮动起来,其它元素会位于它的底层. 最近在系统地学习HTML5,感觉补上了好多缺失的知识. 例如: 锚点定位其实可以通过 id 来实现: CSS 使用 !i ...
- div里面的元素垂直均匀分布 按钮引发地址栏出现问号 判断一个数组是否为空 div底部居中 路由传参接受参数
一个固定高度的div的子元素 在垂直 方向上平均分布 .important-dec{ height: 121px; flex-direction: column; display: flex; jus ...
- 块状元素(div)与内联元素(span)
<pre class="html" name="code"><html xmlns="http://www.w3.org/1999/ ...
- css选择器(选择<div>内所有<p>元素)
情况1:<div><p></div> 情况2:<div><a><p></p></a></div&g ...
- div内嵌p,div等块元素出现的问题
div内嵌p,div等块元素出现的问题 http://caiceclb.iteye.com/blog/428085 div内部块级元素,比如p,div,设置外间距(margin)的话会怎样.本来还纳闷 ...
- div内元素的居中
1.如果是一行文字(不超过一行) parent{ text-align:center; line-height:div高度; } 2.如果是div内其他类型元素 parent{ height:xxxp ...
- [19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器
一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...
随机推荐
- Linux安全应用之防垃圾邮件server的构建
Linux安全应用之防垃圾邮件server的构建 一.垃圾邮件产生的原因 垃圾邮件(SPAM) 也称作UCE(Unsoticited Commercial Email.未经许可的商业电子邮件)或UBE ...
- Eclipse中jvm执行库的Access restriction问题的解决方法
今天在写代码的时候遇到了jre system libraries的訪问限制问题,该库是jvm执行的依赖库rt.jar,解决方式例如以下: 步骤: (1)项目右击.出现Build Path.点击进入Ja ...
- Linux IO 多路复用是什么意思?
写在前面:本文整理于知乎,原文链接为http://www.zhihu.com/question/32163005/answer/55772739,作者:罗志宇 再次向作者表示感谢~~ 假设你是一个机场 ...
- inter 也支持linux开发了
http://www.intel.cn/content/www/cn/zh/intelligent-systems/bay-trail/atom-processor-e3800-family-over ...
- asp.net mvc + javascript导入文件内容
.近期做的是对现有项目进行重构.WEB FROM改成MVC,其实也算是推倒重来了. 里面有一个导入功能,将文件上传.原先的做法是有一个隐藏的iframe,在这个iframe的页面中设置一个表单form ...
- 实践001:char 类型字段在表中的长度
Rainy on 20170215 1.同事在 写RFC的时候遇到报错:"YTST_001" 必须为扁平结构.不能将内部表.字符# 原因是自建结构中字段定义为了string 类型. ...
- 解决多次异步请求紊乱问题 - JavaScript
加入目前的需求这样的: 左边的菜单链接,点击后通过异步请求返回其HTML代码,然后innerHTML到右面的DIV中,加入切换菜单的速度非常快,最终会导致请求紊乱. 可以加入消息管理机制, ...
- I.MX6 各模块 clock 查询
/********************************************************************* * I.MX6 各模块 clock 查询 * 说明: * ...
- Python进程、线程、协程的对比
1. 执行过程 每个线程有一个程序运行的入口.顺序执行序列和程序的出口.但是线程不能够独立执行,必须依存在进程中,由进程提供多个线程执行控制.每个线程都有他自己的一组CPU寄存器,称为线程的上下文,该 ...
- UNIX 环境模拟工具Cygwin安装及使用图文教程
对于 UNIX 本身,也有各种称呼.IBM® 大型机用户说各种带字母 "z" 的行话,比如 IBM z/OS® 和 System z9 Virtual Machine (z/VM) ...