用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,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...
随机推荐
- android 浮动窗体学习笔记及个人理解(仿360手机助手)
很感谢原文作者 http://blog.csdn.net/guolin_blog/article/details/8689140 经自己理解 程序执行界面例如以下图: 1.程序入口界面 2.小浮动窗体 ...
- JS表格分页组件:fupage的设计思路和详细使用方法(未来考虑开源,争取在2015年)
一.背景 之前在秒针工作的时候,某js高级project师写了非常多自己的组件.当中一套是分页组件.叫做st-grid. 只是在我看来,bug太多.我常常给他反馈bug,我也不清楚为啥 ...
- [Spring实战系列](19)Servlet不同版本号之间的差别
1. 2.3版本号 2.3版本号 <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application ...
- STM32通过调用库函数进行编程
1.调用库函数编程和直接配置寄存器编程的差别: 2.CMSIS标准: 3.STM32库函数的组织: 4.程序例举: 调用库函数实现通过USART发送数据(26个大写的英文字母) 首先:在主函数部分先要 ...
- Fix "Unable to lock the administration directory (/var/lib/dpkg/)" in Ubuntu
While using the apt-get command or the relatively new APT package management tool in Ubuntu Linux or ...
- YTU 1001: A+B Problem
1001: A+B Problem 时间限制: 1 Sec 内存限制: 10 MB 提交: 4864 解决: 3132 [提交][状态][讨论版] 题目描述 Calculate a+b 输入 Tw ...
- YTU 2574: 空白格式化
2574: 空白格式化 时间限制: 1 Sec 内存限制: 128 MB 提交: 233 解决: 118 题目描述 恭喜你进入了蓝桥杯总决赛,本次大赛采用了全自动机器测评系统. 如果你的答案与标准 ...
- maven目录结构介绍篇
bin 该目录包含了mvn运行的脚本,这些脚本用来配置java命令,准备好classpath喝相关的java系统属性 mvn是基于UNIX平台shell脚本,mvn.bat是基于Windows平台的 ...
- 并不对劲的bzoj4825:loj2018:p3721:[HNOI2017]单旋
题目大意 spaly是一种数据结构,它是只有单旋的splay 有一个初始为空的spaly,\(m\)(\(m\leq10^5\))次操作,每个操作是以下5种中的一种: 1.向spaly中插入一个数(过 ...
- bzoj 1497 [NOI2006]最大获利【最大权闭合子图+最小割】
不要被5s时限和50000点数吓倒!大胆网络流!我一个5w级别的dinic只跑了1s+! 看起来没有最大权闭合子图的特征--限制,实际上还是有的. 我们需要把中转站看成负权点,把p看成点权,把客户看成 ...