在编写自定义插件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内的元素不换行的更多相关文章

  1. div内快元素[div,p。。。]居中办法

    方法1: .parent { width:800px; height:500px; border:2px solid #000; position:relative; } .child { width ...

  2. HTML元素分类:块级元素 内联元素和内联块状元素

    在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 1,块状元素 常用的块状元素有: <div>.<p>.<h1 ...

  3. CSS的块级元素和内联元素,以及float

    说明:之前有一点搞错了,就是float其实是浮动起来,其它元素会位于它的底层. 最近在系统地学习HTML5,感觉补上了好多缺失的知识. 例如: 锚点定位其实可以通过 id 来实现: CSS 使用 !i ...

  4. div里面的元素垂直均匀分布 按钮引发地址栏出现问号 判断一个数组是否为空 div底部居中 路由传参接受参数

    一个固定高度的div的子元素 在垂直 方向上平均分布 .important-dec{ height: 121px; flex-direction: column; display: flex; jus ...

  5. 块状元素(div)与内联元素(span)

    <pre class="html" name="code"><html xmlns="http://www.w3.org/1999/ ...

  6. css选择器(选择<div>内所有<p>元素)

    情况1:<div><p></div> 情况2:<div><a><p></p></a></div&g ...

  7. div内嵌p,div等块元素出现的问题

    div内嵌p,div等块元素出现的问题 http://caiceclb.iteye.com/blog/428085 div内部块级元素,比如p,div,设置外间距(margin)的话会怎样.本来还纳闷 ...

  8. div内元素的居中

    1.如果是一行文字(不超过一行) parent{ text-align:center; line-height:div高度; } 2.如果是div内其他类型元素 parent{ height:xxxp ...

  9. [19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器

    一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...

随机推荐

  1. 使用正則表達式的格式化与高亮显示json字符串

    使用正則表達式的格式化与高亮显示json字符串 json字符串非常实用,有时候一些后台接口返回的信息是字符串格式的,可读性非常差,这个时候要是有个能够格式化并高亮显示json串的方法那就好多了,以下看 ...

  2. 十分简洁的手机浏览器 lydiabox

    没有地址栏,没有工具栏.web app无需下载.无需安装.无需更新,加入即用:再也不用记住网址.更不用输入网址--一款这样极简极方便的浏览器,你想要吗? 我们做了一个十分简洁的手机浏览器,这个浏览器也 ...

  3. IO流-获取指定目录下文件夹和文件对象【File类】

    一.运用File类实现获取指定目录下文件夹和文件对象 1.File类 2.方法: 获取文件绝对路径 :getAbsolutePath 案例: import java.io.File; /** * 获取 ...

  4. Servlet的引入

    一.分析 此模式有问题: 1.jsp需要呼叫javabean StudentService stuService = new StudentServiceImpl(); List<Student ...

  5. 32位与4G内存限制

    32位有4G内存限制,好像人所共知.但这个32位是指32位的CPU还是32位的操作系统? 答案是,都是.内存限制,是操作系统和硬件(CPU,也许还有内存控制器)共同制约的.CPU对应的是寻址物理地址, ...

  6. 错误 1 无法将程序集“NBear.Data.dll”复制到文件“D:\newbpm\bpm\SureBpm\Bin\NBear.Data.dll”。无法将“D:\newbpm\bpm\SureSoft.WebServiceBaseLib\bin\Debug\NBear.Data.dll”添加到网站。 无法添加文件“Bin\NBear.Data.dll”。 拒绝访问。 D:\..

    错误 1 无法将程序集“NBear.Data.dll”复制到文件“D:\newbpm\bpm\SureBpm\Bin\NBear.Data.dll”.无法将“D:\newbpm\bpm\SureSof ...

  7. spring boot redis缓存入门

    摘要: 原创出处 泥瓦匠BYSocket 下载工程 springboot-learning-example ,工程代码注解很详细.JeffLi1993/springboot-learning-exam ...

  8. 解决手淘lib-flexible.js在移动端首次加载页面页面先放大后正常问题

    例如这样 然后这样 出现这样的原因一般是   静态的,即html里有一些静态的(即非js动态添加的) 如果在页面加载完成后,页面是用js动态添加的,这个问题就不太明显, doc.addEventLis ...

  9. Net4.6 Task 异步函数 比 同步函数 慢5倍 踩坑经历

    Net4.6 Task 异步函数 比 同步函数 慢5倍 踩坑经历 https://www.cnblogs.com/shuxiaolong/p/DotNet_Task_BUG.html 异步Task简单 ...

  10. asp.net MVC Model 类的主键 int类型、string类型、GUID类型。

    在使用asp.net mvc进行定义 模型类的时候,一般情况下,我们都会定义一个属性为 int iD{get;set;} 或为int ClassNameID {get;set;},在这种情况下 1.I ...