用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,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...
随机推荐
- for循环console输出结果的问题
我想定时打印出一串数字,写好了如下代码 for (var i = 0; i < 5; i++) { setTimeout(function () { console.log(i); ...
- 2 Angular 2 的核心概念
一.组件(Components): 组件是构成 Angular 应用的基础和核心,它是一个模板的控制类,用于处理应用和逻辑页面的视图部分.组件知道如何渲染自己及配置依赖注入,并通过一些由属性和方法组成 ...
- What to do about Eclipse's “No repository found containing: …” error messages?
As Mauro said: "you have to remove and re-add the Eclipse Project Update site, so that its meta ...
- while语句字符串的基本操作
1,编码:对现在通用文字编码成计算机文字,便于储存,传递,交流. 最早的计算机编码是ACSII美国人创建的,包含英文字母,数字,以及特殊符号.总共是128个码位:2**7,因为计算机的底层只能识别:& ...
- FunsionCharts Demo
原文路径:http://www.cnblogs.com/xuhongfei/archive/2013/04/12/3016882.html 一.简介 Ø FusionCharts 是InfoSoft ...
- AWS携手上海嘉定政府推出首个联合孵化器 为创业公司拓展AWS云服务可用资源
2014年10月17日 AWS Activate创业加速计划为中国创业公司提供各种支持,包含AWS全球和中国区服务抵扣券.培训和开发人员支持.同一时候,AWS携手上海嘉定政府成立首家联合孵化器,为创业 ...
- solr入门之多线程操作solr中索引字段的解决
涉及的问题: 建索引时有一个字段是该词语出现的次数,这个字段是放在solr里的 而我用的是多线程来进行全量导入的,这里就涉及到了多线程问题 多个线程操作同一个变量时怎样处理? 我是这样子做的 : 首 ...
- grails Domian对象转JSON去class以及自己定义字段的最佳方式
grails:2.4.x IDE:Intellij IDEA 13.x grails的Domain对象之间假设存在环形引用.直接使用as JSON仅仅会输出关联对象的id.而且假设使用deep也会报错 ...
- MySQL之——server保持与MySQL的连接
转载请注明出处:http://blog.csdn.net/l1028386804/article/details/47008019 server程序常常要訪问数据库,而且server程序是长时间保持运 ...
- YTU 2428: C语言习题 计算该日在本年中是第几天
2428: C语言习题 计算该日在本年中是第几天 时间限制: 1 Sec 内存限制: 128 MB 提交: 1505 解决: 857 题目描述 定义一个结构体变量(包括年.月.日).编写一个函数d ...