<!DOCTYPE html>

<html lang="en" dir="ltr">

  <head>

    <meta charset="utf-8">

    <title></title>

  <style>

		li{

			list-style: none;

		}

		.box1{

			width: 400px;

			height: 100px;

			overflow-y: hidden;

			overflow-x: scroll;

			/* position: relative; */

		}

	   .box2{

			display: flex;

			/* position: absolute; */

		 }

		 .box2 li{

			 width: 50px;

			 height: 50px;

			 flex-shrink: 0;

			 line-height: 50px;

			 background: red;

			 margin: 15px;

			 text-align: center;

			 color: #fff;

		 }

  </style>

</head>

  <body>

	<div class="box1">

		<ul class="box2">

			<li>1</li>

			<li>2</li>

			<li>3</li>

			<li>4</li>

			<li>5</li>

			<li>6</li>

			<li>7</li>

			<li>8</li>

			<li>9</li>

			<li>10</li>

		</ul>

	</div>

  </body>

</html>

　　代码中，第一种可以使用 position: absolute;给box2，其父元素使用相对定位，使得box2的子元素可以横向滚动，改变display:flex布局的自适应；
　　
　　第二种是使用  flex-shrink: 0; 让其display:flex；不在收缩宽度；

css 控制横向布局，超出隐藏，滚动的更多相关文章

  1. css控制div显示／隐藏方法及２种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  2. CSS控制文字，超出部分显示省略号

    http://www.daqianduan.com/6179.html <p style="width: 300px;overflow: hidden;white-space: now ...

  3. css控制标题长度超出部分显示省略号

    width: 50px; overflow:hidden;white-space:nowrap; text-overflow:ellipsis; 设置或检索是否使用一个省略标记(...)标示对象内文本 ...

  4. css强制换行和超出隐藏实现

        一.强制换行1 word-break: break-all; 只对英文起作用,以字母作为换行依据. 2 word-wrap: break-word; 只对英文起作用,以单词作为换行依据. 3 ...

  5. css控制滚动条的出现隐藏导致的页面闪动的问题

    之前这些小细节都在实践的时候给忽视了,或者都动态加载,框架的使用等因素的隐藏,变得不那么容易出现. 今天看到张鑫旭大牛的微博,觉得记录一下这个小问题的解决方案 <div style=" ...

  6. css 解决fixed 布局下不能滚动的问题

    如果我们布局的是后是fixed并且想要高度为100%的时候,我们一般会这样设置: div { display:fixed; height:%; overflow:scroll; } 但是这样并不会出现 ...

  7. CSS - 控制最后边框的隐藏或设置为none

    div{       width: 20%;       border-left: 1px solid $border-color;       &:nth-child(5n+1){      ...

  8. CSS多行文字超出隐藏加省略号

    overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 限制行数 overflow: hidden; text-overflow: ...

  9. CSS 控制table 滑动及调整列宽等问题总结

    一. 通过css控制table y方向上滚动 html中没有滚动条,可以根据overflow属性的scroll来对table显示不完全的内容进行滚动. 只是y方向上滚动,很简单,只要设置div的hei ...

随机推荐

  1. 移动端返回上一页，刚需！document.referrer 详解

    返回上一页,在PC端我们可以使用:history.go(-1)或者history.back(),可以正常返回第一层.这样,我们不需要上一页的 url 具体是什么,只要使用 history 一般都没啥问 ...

  2. 函数语法：原生js判断某个元素是否有指定的class名的几种方法

    var aLi = document.querySelectorAll('#tabs li'); for(var i = 0;i <p.length;i++){ //第一种方法,用classLi ...

  3. 简单的Web日志处理细节

  4. laravel-mix的安装

    Laravel-mix的安装 Laravel Mix 是一款前端任务自动化管理工具,使用了工作流的模式对制定好的任务依次执行.Mix 提供了简洁流畅的 API,让你能够为你的 Laravel 应用定义 ...

  5. mysql并发控制之数据库锁

    1.mysql和redis的区别 mysql是一种关系型数据库,数据会最终存储在磁盘上.而redis是一种非关系型的nosql数据库,以key-value的形式存储数据,将数据存储在内存.从性能上来说 ...

  6. [系统集成] 基于 elasticsearch 的企业监控方案

    注: 2017年10月16日: 使用中发现 es 查询时序数据的性能较差,且 watch 脚本的编写比较麻烦,因此已将监控系统切换到了 influxdb+grafana平台.新监控系统各方面情况比较满 ...

  7. Power BI行级别安全性(数据权限管理)

    自从PowerBI 的DAX 函数 支持username() 或 userprincipalname()的函数后,我们就可以在Power BI中实现根据用户的行级数据权限的控制. username() ...

  8. Mongodb 相关链接

    http://www.cnblogs.com/lanceyan/tag/mongodb/

  9. Mybatis 笔记

    环境:Mybatis 3 +MariaDB 10.1 似乎在调用存储过程时 ,参数只能写在一行上. 否则会返回语法错误.

  10. Toad DBA Suite for Oracle 12.6 64-bit Commercial 简单连接

    注意:Toad DBA Suite for Oracle 12.6 64-bit Commercial安装包推荐去官网下载,中文版的最好不要使用绿色免安装版,不然连接会报各种错误 1.安装:双击下载好 ...