scroll-view 横向滚动无效解决方法

news/2024/11/24 14:13:18/


给scroll-view 设置固定高度 【必须】

给scroll-view 样式添加 white-space: nowrap;属性【必须】

在scroll-view下的子模块设置 display: inline-block; 属性或 display: inline-table【必须】

在scroll-view下的子模块设置不得设置 float: left;

在scroll-view 上设置属性 scroll-x=”true” 横行滚的许可。

white-space属性介绍:

/* 值 */
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: break-spaces;/* 全局值 */
white-space: inherit;
white-space: initial;
white-space: revert;
white-space: revert-layer;
white-space: unset;


属性值

描述
normal默认。空白会被浏览器忽略。
pre空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap保留空白符序列,但是正常地进行换行。
pre-line合并空白符序列,但是保留换行符。
inherit规定应该从父元素继承 white-space 属性的值。

各种 white-space 值的行为:

换行符空格和制表符文字换行行尾空格
normal合并合并换行删除
nowrap合并合并不换行删除
pre保留保留不换行保留
pre-wrap保留保留换行挂起
pre-line保留合并换行删除
break-spaces保留保留换行换行

display属性介绍:

/* 预设值 */
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;

/* 生成盒子 */
display: none;
display: contents;

/* 两个值的语法格式 */
display: block flow;
display: inline flow;
display: inline flow-root;
display: block flex;
display: inline flex;
display: block grid;
display: inline grid;
display: block flow-root;

/* 其他值 */
display: table;
display: table-row; /* 所有表格元素都有一个等价于 CSS  display 属性的值 */
display: list-item;

/* 全局值 */
display: inherit;
display: initial;
display: revert;
display: revert-layer;
display: unset;


属性值

描述
none此元素不会被显示。
block此元素将显示为块级元素,此元素前后会带有换行符。
inline默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block行内块元素。(CSS2.1 新增的值)
list-item此元素会作为列表显示。
run-in此元素会根据上下文作为块级元素或内联元素显示。
compactCSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
markerCSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
table此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
inline-table此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。
table-row-group此元素会作为一个或多个行的分组来显示(类似 <tbody>)。
table-header-group此元素会作为一个或多个行的分组来显示(类似 <thead>)。
table-footer-group此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
flow-root生成一个块级元素盒,其会建立一个新的块级格式化上下文,定义格式化上下文的根元素。
table-row此元素会作为一个表格行显示(类似 <tr>)。
table-column-group此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。
table-column此元素会作为一个单元格列显示(类似 <col>)
table-cell此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
table-caption此元素会作为一个表格标题显示(类似 <caption>)
inherit规定应该从父元素继承 display 属性的值。


http://www.ppmy.cn/news/773079.html

相关文章

混合APP的5种开发工具

近几年html5技术在各大平台都是人们谈论的焦点。html5技术一直受到各方关注&#xff0c;“html5颠覆原生 App”的争论也从未停止过&#xff0c;不管怎样html5生态的构建方兴未艾。不过对于移动开发者来说更关心的问题是如何低成本、周期短开发出体验效果好的App&#xff0c;所以…

html5+css3总结

1 1.前端组成 2.语义化理解 3.html标准语法 4.html注意的问题 5.字符实体 13 1.注释的写法 2.注释的作用 25 颜色的设置方法 37 浏览器内核 2 单、双标签的划分 14 1.css文件的引入方式 2.两种外部引入的比较 3.引入方式的权重 26 XHTML&#xff1a; 1.文档结构 2…

windows8 平板的使用心得

一、问题的提出 买了本windows8 平板&#xff0c;全触摸&#xff0c;不带键盘鼠标&#xff0c;第一次用。系统与之前版本有差别&#xff0c;不适应。 二、问题的分析 总是有地方改善。 三、问题的解决 1、我的电脑&#xff0c;要在桌面上显示。 点桌面&#xff0c;在桌面上手指…

Android win10 平板 省电,手把手还原win10系统Mobile设置更省电的操作教程

win10电脑系统深受广大电脑爱好者的喜欢&#xff0c;可是很多爱好者在操作过程中经常会遇见win10系统Mobile设置更省电的难题。大多使用者电脑知识有限&#xff0c;针对win10系统Mobile设置更省电的情况&#xff0c;不能独自搞定。朋友们都来找小编帮忙参谋win10系统Mobile设置…

Android win10 平板 省电,小编解答win10系统Mobile设置更省电的图文办法

大家都很喜欢使用win10系统&#xff0c;可有的时候会出现win10系统Mobile设置更省电的问题。当我们遇到win10系统Mobile设置更省电问题的时候该怎么处理呢。解决win10系统Mobile设置更省电的问题非常简单&#xff0c;只需要你依照• 如果你的手机支持“概览屏幕”&#xff0c;并…

android平板电脑开发_如何在Android手机或平板电脑上截图

android平板电脑开发 Sometimes it’s necessary to grab a still image of what’s happening on your device’s screen—that’s called a screenshot. While this used to be a hassle on Android (many moons ago), all modern handsets include the capability. Here’s …

【Camera相机开发】知识点

文章目录 SurfaceView 、Surface 、 SurfaceHolderSurfaceSurfaceHolderSurfaceViewSurfaceView小结 CameraCamera类中的内部类CameraInfo- facing- orientation- canDisableShutterSound 新手村屏幕坐标自然方向图像传感器&#xff08;Image Sensor&#xff09;方向相机预览方…

【Android -- 相机】Camera1 实现拍照 预览功能

前言 Camera1 在 API 21 的时候已经被弃用了&#xff0c;虽然现在google 都推荐 使用 Camerax 来实现相机的一些功能&#xff0c;但这不妨碍我们学习 Camera1 和 Camera2&#xff0c;对此有基础了解&#xff0c;为后续学习 Camera2 和 Camerax 做铺垫 本篇文章&#xff0c;你将…